'How do I Create Bootstrap 5 Tooltip With Text of Different Color Inside?

It seems that adding the double quote char " to the custom HTML tooltip will break the tooltip itself, making the browser think that the tooltip title is over and parsing a chunk of the tooltip title as external HTML.

Here's a jsfiddle.

javascripthtmlcssbootstrap-5web-frontend


Solution 1:[1]

The answer of @poo is not working for me, when using classes it gave me the answer you are searching for.

Here is a https://jsfiddle.net/p5bzmqd1/

<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-html="true" title="<span class=redToolTip>Red Text</span><br><span class=greenToolTip>Green Text</span>">
  I'm a problematic tooltip
</button>

Solution 2:[2]

Updated your code from double quotes to single quotes within the title attribute.

<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-html="true" title="<span style=' color : red'>Red Text</span><br><span style='color : green'>Green Text</span>">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fabian
Solution 2 poo

Related Questions