Tool tip bug when using icon on button

Topic: Tool tip bug when using icon on button

Macjohn asked 4 years 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:

<a 
href='/messages' 
type='button'
data-mdb-ripple-color='dark'
data-mdb-toggle='tooltip'
data-mdb-placement='bottom'
data-target='#is-unsaved' 
title='Beskeder' 
class='save-check btn btn-blue btn-sm btn-rounded waves-effect'><i class='fas fa-comment'></i><span id='bannerNewMessages'></span></a>

Add comment

Grzegorz Bujański staff answered 4 years ago

1 0 Best answer

If you add two data-mdb-toggle attributes, one of them will not work. You can just add a tooltip via js: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2849637#js-tab-view

Add comment

Grzegorz Bujański staff answered 4 years ago

1 0 Best answer

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: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2846830#js-tab-view

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

It looks like this is a problem with Bootstrap tooltips. This problem also occurs on their website, see with an SVG example: https://getbootstrap.com/docs/5.0/components/tooltips/

Until this is fixed, you can use the trigger manual option and add event listeners as a workaround: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2846830#html-tab-view

Add comment

Macjohn answered 4 years ago

0 0 Best answer

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?

Add comment

Macjohn answered 4 years ago

0 0 Best answer

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?)

Add comment

Macjohn answered 4 years ago

0 0 Best answer

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

Add comment