Topic: Tooltip and Navbar dropdown not working in Angular 13

dcos free asked 7 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],
  ...
})

Rafał Seifert free commented 6 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?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • 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