Topic: Dropdown Nav item doesn't work with mdbTooltip
Hi,
I have a problem using mdbTooltip on a dropdown nav-item of mdb-navbar
<li class="nav-item dropdown" dropdown>
<a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbTooltip="User" placement="bottom">
<mdb-icon fas icon="user"></mdb-icon>
</a>
<div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
<a class="dropdown-item waves-light" mdbWavesEffect href="#">My account</a>
<a class="dropdown-item waves-light" mdbWavesEffect href="#">Log out</a>
</div>
</li>
When I click on user icon, the dropdown is not displayed
If I remove
mdbTooltip="User" placement="bottom"
it works
Can you help me please?
Thanks
Marco
This problem will be resolved in next version of MDB Angular. As a workaround for now you can add container="body" input to the element with mdbTooltip directive.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: PC
- Browser: Chorme
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
That's very strange, we will take a closer look at this. I'm afraid there is no easy workaround for now. Normally I would recommend to add mdbTooltip directive to the mdb-icon element, but in this case I see that there are also some problems with tooltip arrow placemenent when you do that.