如何创建带有不同颜色文本的Bootstrap 5工具提示？

发布于 2025-01-28 17:55:47 字数 246 浏览 4 评论 0原文

似乎添加双引号char “到自定义HTML Tooltip将破坏工具提示本身，使浏览器认为工具提示标题已经结束，并将工具提示标题的一部分分解为外部HTML。

这是a jsfiddle 。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℉服软 2025-02-04 17:55:47

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

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>

回复收藏 0 原文

︶葆Ⅱㄣ 2025-02-04 17:55:47

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

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

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

回复收藏 0 原文

~没有更多了~