bootstrap 4 - tooltip and html problems?

Question

Welcome To Ask or Share your Answers For Others

bootstrap 4 - tooltip and html problems?

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

bootstrap 4 - tooltip and html problems?

My codes are as follows. tooltip in <del> </del> html tag not working why? <del>test</del> test text with strikethrough does not appear. What am I missing?

<!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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
  crossorigin="anonymous"></script>
<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>
</body>
</html>

How does a code that looks so simple won't work :(

I reviewed the Bootstrap documents, but I can't understand it. It should work.

question from:https://stackoverflow.com/questions/65939012/tooltip-and-html-problems

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T18:54:41+0000

The problem: some of the OP's tooltip content is not showing, specifically the <del>test</del> section.

The reason: Bootstrap removes the <del> tag when displaying the tooltip.

Here is the HTML requested to be displayed:

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

Here is what Bootstrap displays:

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

Why is Bootstrap stripping out tags?

A review of Bootstrap's JavaScript code (tooltip.js & sanitizer.js) reveals that the code by default sanitizes the HTML in Tooltips, permitting only those HTML elements that are in a whitelist. Here is that default whitelist of permitted tags:

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

In addition, only these element attributes are whitelisted:

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

Everything else gets stripped out, but the sanitizer can be disabled completely with the following JavaScript:

myElement.dataset.sanitize = false;

Bootstrap also documents a way to add values to the default whitelist.

Categories

bootstrap 4 - tooltip and html problems?

bootstrap 4 - tooltip and html problems?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags