如何使用内部不同颜色的文本创建 Bootstrap 5 工具提示？

Question

似乎在自定义 HTML 工具提示中添加双引号字符"会破坏工具提示本身，使浏览器认为工具提示标题已经结束并将工具提示标题的一部分解析为外部 HTML。

这是一个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

@poo 的答案对我不起作用，在使用课程时它给了我你正在寻找的答案。

这是一个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>