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

Question

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 .

Answer 1

将您的代码从双引号更新为标题属性中的单引号。

<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>">

Answer 2

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>