Search code examples
htmlbootstrap-4tooltip

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.


Solution

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