Topic: Tool tip bug when using icon on button
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>
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
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?)
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
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?
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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