Topic: Tooltip and Navbar dropdown not working in Angular 13
dcos free asked 8 months ago
I've added the MdbDropdownModule and MdbTooltipModule to an angular 13 app with Mdb 5.0.0 (mdb-angular-ui-kit-2.3.0.tgz). I even tried with the exact code snippets in the MdBootstrap angular documentation, including the imports in the api docs.
Expected behavior
Tooltip shows on hover and hides when not hovering.
Dropdown in a nav bar toggles a dropdown menu.
Actual behavior
Tooltip shows on hover but doesn't hide when you move the mouse away.
Dropdown shows on click but doesn't hide on click again or when you try to click on another dropdown.
Resources (screenshots, code snippets etc.)
app.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>
app.module.ts:
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
import { MdbTooltipModule} from 'mdb-angular-ui-kit/tooltip';
…
@NgModule ({
...
imports: [MdbDropdownModule, MdbRippleModule, MdbTooltipModule],
...
})
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: 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 free commented 8 months ago
Do you get any errors in console? Have you imported BrowserAnimationsModule in your application? Are you using Angular v13 with MDB5 2.3.0 package?