Topic: Tool tip bug when using icon on button

Macjohn free asked 3 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>

Grzegorz Bujański staff answered 3 years ago


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


Macjohn free answered 3 years ago


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


Macjohn free answered 3 years 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?)


Grzegorz Bujański staff answered 3 years 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: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2846830#js-tab-view


Macjohn free answered 3 years 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?


Grzegorz Bujański staff answered 3 years ago


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



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

  • ForumUser: 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