我正在尝试在引导工具提示中设置文本样式。我的要求很简单:我希望第一个按钮上的工具提示文本显示为红色。我用
data-html="true"
在我的工具提示中使用 HTML。为什么不是红色的?
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red;'>this text should be red</div>">
Press me
</button>
在同样的事情上,我希望首先显示以下工具提示上的工具提示。表环境完全隐藏它。这是同一个问题吗?
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<table><tr><td>this text should appear</td></tr></table>">
Press me 2
</button>
我创建了一个可以清楚地显示问题的 fiddle 。
https://jsfiddle.net/ws9z37q2/9/
任何帮助将不胜感激。提前致谢!
最佳答案
给元素一个类,并在 CSS 中将样式应用到类。
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div class='red'>this text should be red</div>">
Press me
</button>
当我在 Github 中检查 Bootstrap 的源代码时,默认情况下它是 sanitizing the HTML content不允许使用 style
属性,check here for more info .
因此,您也可以通过禁用 sanitize
选项(不推荐)使其正常工作。
$(function() {
$('[data-toggle="tooltip"]').tooltip({
sanitize: false
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red'>this text should be red</div>">
Press me
</button>
关于javascript - 为什么不显示引导工具提示的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55776926/