如何创建 Bootstrap 5 工具提示，其中包含不同颜色的文本？

Question

好像加了双引号char " 到自定义 HTML 工具提示将破坏工具提示本身，使浏览器认为工具提示标题已结束并将工具提示标题的一部分解析为外部 HTML.

这是一个jsfiddle。

Answer 1

已将 title 属性中的代码从双引号更新为单引号。

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

如何创建 Bootstrap 5 工具提示，其中包含不同颜色的文本？

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

html

javascript

css

web-frontend

bootstrap-5