mdb Tooltip problem

Topic: mdb Tooltip problem

digitalmanagerguru asked 5 years ago

Expected behavior

I am expecting to see the tooltip to popup only when the reference element is onhover.

Actual behavior

What happens is that when we hover the tooltip position (where it will appear) the hover is triggered.

What I did to solve this was to create a custom component:

<template>
<mdb-tooltip
    v-bind="$attrs"
    v-on="$listeners"
>
    <slot name="tip" slot="tip"></slot>
    <slot name="reference" slot="reference"></slot>
</mdb-tooltip>
</template>

<script>
  import { mdbTooltip } from 'mdbvue';

  export default {
    inheritAttrs: false,
    name:"CustomMdbTooltip",
    components: {
      mdbTooltip
    }
  }
</script>

<style scoped>
  ::v-deep .tooltip {
      z-index: -1;
  }
  ::v-deep .show .tooltip {
      z-index: 10000;
  }
</style>

Magdalena Dembna staff premium commented 5 years ago

Thank you for this remark - we will discuss this issue within our team. Best regards, Magdalena

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue

User: Free
Premium support: No
Technology: MDB Vue
MDB Version: 6.5.0
Device: Desktop
Browser: Chrome
OS: Win-10 Pro
Provided sample code: No
Provided link: No

digitalmanagerguru

579Support score
57Questions 29Answers

0Snippets likes 1Snippets