Bootstrap 4 HTML Tooltip

Question

I developed a website using Bootstrap 4 + jquery. I require HTML-styled tooltips, however for some reason the tooltips are populated using the jquery text() and not html(), thus displaying the html as text. I believe my code is correct so no sure what the issue is. Below is an example of a table cell where a tooltip is required. I put in some dummy HTML code in order to check if it works:

<td measureid="3454" data-toggle="tooltip" data-html="true" contenteditable="true" title="<i>3</i><b>6</b>">15</td>

Following the JScode to enable tooltips:

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

Unfortunately the tooltips show the HTML as text. I checked if Bootstrap is actually affecting the tooltip and the tooltip appearance changing when not activating the tooltip using the above JS code.

Any idea what the issue might be?

It would help if you provided a [mcve]. Use the live demo feature of the question editor. — Quentin, Jun 23 '20 at 16:38

score 0 · Answer 1 · answered Jun 23 '20 at 17:03

0

Do you have all scripts path included? I tested your code with Bootstrap v4.5.0 and it is working.

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<table>
  <tbody>
    <td measureid="3454" data-toggle="tooltip" data-html="true" contenteditable="true" title="<i>3</i><b>6</b>">15</td>
  </tbody>
</table>

answered Jun 23 '20 at 17:03

yinsweet

2,823
1
9
21

I do... I'm going to upgrade to V4.5 and see if it makes a difference. I'm using an earlier version – ceds Jun 23 '20 at 17:18
Upgrading to Bootstrap not making a difference. Probably another library that is in conflict – ceds Jun 23 '20 at 17:36
Ok. I have seen you have found a solution. – yinsweet Jun 24 '20 at 00:52

score -1 · Answer 2 · answered Jun 23 '20 at 17:39

-1

The problem was JQuery UI also having a tooltip library which I referenced. The two libraries clashed and JQuery UI was used. Below answer solved this problem

https://stackoverflow.com/a/19247955/1035217

answered Jun 23 '20 at 17:39

ceds

2,097
5
32
50

Bootstrap 4 HTML Tooltip

2 Answers2