mdb-tooltip doesn't work inside mdb-dropdown


Topic: mdb-tooltip doesn't work inside mdb-dropdown

digitalmanagerguru pro premium asked 3 years ago

Expected behavior

I was using an mdb-navbar-nav > mdb-dropdown > mdb-dropdown-menu > mdb-dropdown-item (with a v-for) and inside that I try to use a mdb-tooltip, but the tooltip didnt worked when the text was hovered.

Actual behavior

When I hovered the tooltip element, nothing happened. No errors on console, nothing.

I tried to create a snippet, (tbh I tried to create many times for the last 2 months, but your snippet creator for vue it simple doesn't work...)

I hope this information is more then enough for help you guys debuging this.

Best regards


Magdalena Dembna staff premium answered 3 years ago

        <mdb-dropdown>
          <mdb-dropdown-toggle color="default" slot="toggle">Basic dropdown</mdb-dropdown-toggle>
          <mdb-dropdown-menu>
            <mdb-dropdown-item href="#">
              <mdb-tooltip>
                <span slot="reference">Action</span>
                <span slot="tip">Hello</span>
              </mdb-tooltip>
            </mdb-dropdown-item>
            <mdb-dropdown-item href="#">Another action</mdb-dropdown-item>
            <mdb-dropdown-item href="#">Something else here</mdb-dropdown-item>
            <div class="dropdown-divider"></div>
            <mdb-dropdown-item href="#">Separated link</mdb-dropdown-item>
          </mdb-dropdown-menu>
        </mdb-dropdown>

I tested this code in our environment and it seems to work fine. Can you share your code so we could compare?


digitalmanagerguru pro premium commented 3 years ago

After some debuging I've found out the culprit on my code.

I had "disabled" attr on my dropdown-item:

<mdb-dropdown-item v-for="(item, index) in notification.items" :key="item.id" @click="markUnread(item.id)" disabled>

Removing that disabled makes the tooltip working. And having it, creates this problem I was having.

Best regards


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: Yes
  • Technology: MDB Vue
  • MDB Version: 5.8.3
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: No