我如何找出为什么我的徽章的工具提示上不接受HTML标签？

Question

我尝试按照https://getbootstrap.com/docs/4.3/components/tooltips/

下的示例添加带有HTML工具提示的引导程序徽章警报。

但是，使用以下代码显示了工具提示，但未解释HTML标记。

徽章HTML代码如下（它是表格单元格中的徽章-td）：

<span class="badge badge-pill badge-danger" data-toggle="tooltip" data-html="true" title="<b>Tooltip</b> <u>with</u> <b>HTML</b>">1</span>

我已经尝试过使用页面上所述的方式激活$（document）.ready函数上的工具提示，

   // initialize tooltips
   $('[data-toggle="tooltip"]').tooltip()

但是仍然不知道为什么会这样。

我绝对不知道为什么不格式化HTML，也不知道如何调试/理解此问题的根源。您甚至将如何开始调试它？

谢谢。

Answer 1

您的代码可以正常使用，如下所示正确使用所有链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

$('[data-toggle="tooltip"]').tooltip();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  

  <span class="badge badge-pill badge-danger" data-toggle="tooltip" data-html="true" title="<b>Tooltip</b> <u>with</u> <b>HTML</b>">1</span>