Tool tip bug when using icon on button

Topic: Tool tip bug when using icon on button

Macjohn asked a year ago

Expected behavior When I insert a button with an icon, and add tooltips, I would expect Tooltips to appear, when hovering the button.

Actual behavior The tool tip shows when hovering the button, as long as I don't also hover the icon. When hovering the icon, the tooltip disappears and does not reappear until I refresh the page.

Resources (screenshots, code snippets etc.) Here is the button I would like to insert:

class='save-check btn btn-blue btn-sm btn-rounded waves-effect'><i class='fas fa-comment'></i><span id='bannerNewMessages'></span></a>

Grzegorz Bujański staff answered a year ago

If you add two data-mdb-toggle attributes, one of them will not work. You can just add a tooltip via js:

Grzegorz Bujański staff answered a year ago

To make sure that all items will be found I suggest using [data-mdb-toggle = "tooltip"] as a selector.

In the snippet, I added two additional elements and changed the JS code:

Grzegorz Bujański staff answered a year ago

It looks like this is a problem with Bootstrap tooltips. This problem also occurs on their website, see with an SVG example:

Until this is fixed, you can use the trigger manual option and add event listeners as a workaround:

Macjohn answered a year ago

Thank you for the suggestion. I tried it out and it works nicely, - however: I have many relatively important tooltips. (I am upgrading a big project from MDB 4 jQuery, to MDB 5) So I cant setup separate listeners for each tooltip.

Do you have a snippet that can do the same thing, but use a class name instead of id - so that I don't have to set up specific listeners for every tooltip?

Macjohn answered a year ago

Very good. Thank you. That works well.

How do I add tooltips to buttons that open modals? (It looks like I have to use the same data-mdb-toggle for both tooltip and modal?)

Macjohn answered a year ago

Very good! Thank you very much, that worked like a charm.

Please insert min. 20 characters.


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



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: Laptop
  • Browser: Firefox
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No