Dropdown Nav item doesn't work with mdbTooltip


Topic: Dropdown Nav item doesn't work with mdbTooltip

bitjuice pro asked 3 years ago

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


Arkadiusz Idzikowski staff commented 3 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.


Arkadiusz Idzikowski staff answered 3 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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