Topic: MdbTooltip and MdbDropdown not hiding
Added MDBootstrap 5.0.0 to angular 13 application. Most components work fine but having issues with the tooltip and dropdown in a navigation menu. Is version 5 compatible with angular 13?
Expected behavior mdb-tooltip shows on hover and hides when mouse moves away from element. mdb-dropdown shows menu items on click and hides menu items when clicking away or on the element again.
Actual behavior mdb-tooltip shows on hover and does not hide when moving mouse away. mdb-dropdown shows menu items on click and but does not hide when clicking elsewhere or on the element again. menu remains even when navigating to another view.
Resources (screenshots, code snippets etc.)
In app.ts
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbRippleModule } from 'mdb-angular-ui-kit/rip
…
@NgModule ({
...
imports: [MdbTooltipModule, MdbDropdownModule, MdbRippleModule],
...
})
In component html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Dropdown -->
<li mdbDropdown class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
mdbDropdownToggle
aria-expanded="false"
>
Dropdown link
</a>
<ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<p class="mb-0">
Hover the link to see the
<a href="#" mdbTooltip="Hi! I'm tooltip">tooltip</a>
</p>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 5.0.0
- Device: All
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Rafał Seifert commented 8 months ago
Do you get any errors in console? Have you imported BrowserAnimationsModule in your application? For Angular v13 you should use v2.3.0 of MDB5 Library. MDB5 is a library and the versioning is explained in the changelog where you can look for specific requirements. https://mdbootstrap.com/docs/angular/getting-started/changelog/#v2-0-0