Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Tooltip HTML messages not working

Ozcan Arslan pro asked 5 years ago


Expected behavior

HTML formatted Tooltip messages

Actual behavior

enter image description here

Resources (screenshots, code snippets etc.)

I am using MDB Pro v4.10.1 with Bootstrap v4.4.1. I want to use html formatted Tooltips but it isnot working. I did exactly as in docs both in getbootstrap and MDBootstrap nut still i get html codes in tooltips as it's shown in screenshot.


Ozcan Arslan pro answered 5 years ago


Hi,

I am using Jquery Ui for multidatespicker component and i found that jQuery-ui tooltip addon doesn't support html rendering and if you jquery-ui.js file after mdb.js file it overlaps with MDBoostrap tooltip and disables html rendering feature.

To use MDBoostrap tooltip with all cool features just add jquery-ui.js just after jquery.js file if you need it.


Grzegorz Bujański staff commented 5 years ago

I understand that fix the problem and everything works fine now?


Ozcan Arslan pro commented 5 years ago

Yes. Everything related to Tooltip is working fine.


Akhil M free answered 1 year ago


I didn't work even though I added data-html="true" attribute but it worked when i used $('[data-toggle="tooltip"]').tooltip({ html:true })


lemons free answered 5 years ago


Here you go: https://mdbootstrap.com/snippets/jquery/lhock/1556489

use the data-html="true" attribute.


Ozcan Arslan pro commented 5 years ago

I use exactly as you said and my code worked in your snipped but somehow it isnot working on my site. I used this way too:

$('[data-toggle="tooltip"]').tooltip({ html:true })



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.10.1
  • Device: Desktop, Mobile
  • Browser: Firefox, Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes