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