时间戳

首页 > 解决方案 > 如何找出我的徽章在其工具提示上不接受 HTML 标记的原因？

html - 如何找出我的徽章在其工具提示上不接受 HTML 标记的原因？

问题描述

我正在尝试添加一个带有 HTML 工具提示的引导徽章警报，如下所示：https ://getbootstrap.com/docs/4.3/components/tooltips/

但是，使用以下代码，会显示工具提示，但不会解释 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 没有被格式化，也不知道如何调试/理解这个问题的根源。你甚至会如何开始调试它？

谢谢。

标签： htmlbootstrap-4

解决方案

您的代码运行良好，正确使用所有链接，如下所示

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

推荐阅读