Topic: mdb-tooltip doesn't work inside mdb-dropdown

digitalmanagerguru free asked 3 years ago

Expected behavior

I was using an mdb-navbar-nav > mdb-dropdown > mdb-dropdown-menu > mdb-dropdown-item (with a v-for) and inside that I try to use a mdb-tooltip, but the tooltip didnt worked when the text was hovered.

Actual behavior

When I hovered the tooltip element, nothing happened. No errors on console, nothing.

I tried to create a snippet, (tbh I tried to create many times for the last 2 months, but your snippet creator for vue it simple doesn't work...)

I hope this information is more then enough for help you guys debuging this.

Best regards

Magdalena Dembna staff answered 3 years ago

          <mdb-dropdown-toggle color="default" slot="toggle">Basic dropdown</mdb-dropdown-toggle>
            <mdb-dropdown-item href="#">
                <span slot="reference">Action</span>
                <span slot="tip">Hello</span>
            <mdb-dropdown-item href="#">Another action</mdb-dropdown-item>
            <mdb-dropdown-item href="#">Something else here</mdb-dropdown-item>
            <div class="dropdown-divider"></div>
            <mdb-dropdown-item href="#">Separated link</mdb-dropdown-item>

I tested this code in our environment and it seems to work fine. Can you share your code so we could compare?

digitalmanagerguru free commented 3 years ago

After some debuging I've found out the culprit on my code.

I had "disabled" attr on my dropdown-item:

<mdb-dropdown-item v-for="(item, index) in notification.items" :key="" @click="markUnread(" disabled>

Removing that disabled makes the tooltip working. And having it, creates this problem I was having.

Best regards

Please insert min. 20 characters.


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



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.3
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: No