Question

我的代码如下。 <del> </del> html 标签中的工具提示不起作用，为什么？ <del>test</del> 带有删除线的测试文本不会出现。我错过了什么？

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
        crossorigin="anonymous">

  <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>


<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-html="true"
        title="<div class='col-12'><div class='row'><div class='col-4'>test</div><div class='col-4'><del>test</del></div><div class='col-4'>test</div></div></div>">
  Tooltip with HTML
</button>
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
  crossorigin="anonymous"></script>
<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>
</body>
</html>

看起来如此简单的代码怎么行不通:(

我查看了 Bootstrap 文档，但我无法理解。它应该可以工作。

Answer 1

问题：部分 OP 的工具提示内容未显示，特别是 <del>test</del> 部分。

原因：Bootstrap 在显示工具提示时删除了 <del> 标签。

这是请求显示的 HTML：

<div class='col-12'>
  <div class='row'>
    <div class='col-4'>test</div>
    <div class='col-4'>
      <del>test</del>
    </div>
    <div class='col-4'>test</div>
  </div>
</div>

以下是 Bootstrap 显示的内容：

<div class="arrow"></div>
<div class="tooltip-inner">
  <div class="col-12">
    <div class="row">
      <div class="col-4">test</div>
      <div class="col-4"></div>
      <div class="col-4">test</div>
    </div>
  </div>
</div>

为什么 Bootstrap 会去掉标签？

对 Bootstrap 的 JavaScript 代码（tooltip.js 和 sanitizer.js）的审查表明，工具提示中的代码默认为 sanitizes the HTML，仅允许那些在白名单中的 HTML 元素。这是允许标签的默认白名单：

<a>
<area>
<b>
<br>
<col>
<code>
<div>
<em>
<hr>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<i>
<img>
<li>
<ol>
<p>
<pre>
<s>
<small>
<span>
<sub>
<strong>
<u>
<ul>

此外，只有这些元素属性被列入白名单：

all tags: class, dir, id, lang, role, aria-*
<a> only: target, href, title, rel
<img> only: src, srcset, alt, title, width, height

其他所有内容都会被删除，但可以使用以下 JavaScript 完全禁用消毒剂：

myElement.dataset.sanitize = false;

Bootstrap 还记录了一种 add values to the default whitelist 的方法。

Answer 2

解决方案：当我们使用 <s> test </s> 标签而不是 <del> test </del> 标签时，它可以很好地用作删除线文本。

工具提示和html问题？

2 个答案: