为什么 bootstrap 工具提示的样式不显示？

Question

我正在尝试为 bootstrap 工具提示中的文本设置样式。我的要求很简单：我希望第一个按钮上的工具提示文本显示为红色。我使用

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>

同样的事情，我希望首先显示以下工具提示上的工具提示。 table 环境将其完全隐藏。这是同一个问题吗？

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

如有任何帮助，我们将不胜感激。提前致谢！

Answer 1

给元素一个 class 并将样式应用到 CSS 中的 class。

$(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 the style attribute is not allowed, 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>

为什么 bootstrap 工具提示的样式不显示？

Why doesn't the style of the bootstrap tooltip show?

javascript

css

jquery

tooltip

bootstrap-4