MdbTooltip and MdbDropdown not hiding


Topic: MdbTooltip and MdbDropdown not hiding

dcos asked 9 months ago

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>

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • 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