Topic: mdb-tooltip doesn't work inside mdb-dropdown
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
<mdb-dropdown>
<mdb-dropdown-toggle color="default" slot="toggle">Basic dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item href="#">
<mdb-tooltip>
<span slot="reference">Action</span>
<span slot="tip">Hello</span>
</mdb-tooltip>
</mdb-dropdown-item>
<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>
</mdb-dropdown-menu>
</mdb-dropdown>
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 4 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="item.id" @click="markUnread(item.id)" disabled>
Removing that disabled makes the tooltip working. And having it, creates this problem I was having.
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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