I am trying to add a bootstrap badge-alert with an HTML tooltip on it, following the example under: https://getbootstrap.com/docs/4.3/components/tooltips/

However, with the following code, the tooltip is shown, but the HTML tags are not interpreted.

The badge HTML code follows (it is a badge inside a table cell - td):

<span class="badge badge-pill badge-danger" data-toggle="tooltip" data-html="true" title="<b>Tooltip</b> <u>with</u> <b>HTML</b>">1</span>

I've tried activating the tooltips on the $(document).ready function, as stated on the page, with

   // initialize tooltips
   $('[data-toggle="tooltip"]').tooltip()

But still couldn't figure why it is happening.

enter image description here

I definitely have no idea on why the HTML is not getting formatted, nor how to debug/understand the source of this issue. How would you even start debugging it?

Thanks.

1 Answers

0
Udhay Titus On

Your code is working fine use all the links properly like below

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

$('[data-toggle="tooltip"]').tooltip();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  

  <span class="badge badge-pill badge-danger" data-toggle="tooltip" data-html="true" title="<b>Tooltip</b> <u>with</u> <b>HTML</b>">1</span>