CODEWITHSUNDEEP
bootstrap-4
DevWizard
DevWizard

Reputation: 695

bootstrap doesn't display table inside tooltip

I was taking a look to a last year project and i realised that Bootstrap doesn't display anymore table in tooltips.

During the last year I've updated Bootstrap, we have a shared asset in place for another project and i use the same version.

I'm currently using bootstrap 4.3.1, when I created the project last year seems i was using 4.1.0, I replaced my JS with V 4.1.0 and it works

This is my PHP code that I'm using to print out the html

echo 'data-toggle="tooltip" data-html="true" data-container="body" data-placement="bottom" 
title="<table class=\'kpiTableHov\'><tr><td colspan=\'2\' class=\'text-center\'>Total Accidents</td></tr><tr><td>Year Total &nbsp;</td><td>&nbsp;/ % change from previous year</td></tr><tr><td></td><td>/ % difference (local % change</td></tr><tr><td></td><td>minus national % change)&nbsp;</td></tr></table>"';

If I change table with something else is working properly, what can be the problem?

If I use Javascript $('.testtooltip').tooltip('show') to force the tooltip to display it and I check the bootstrap element at the end of the html, is empty there is no content. enter image description here

Upvotes: 4

Views: 5884

Answers (1)

User863
User863

Reputation: 20039

Your are searching for sanitize option

$('.testtooltip').tooltip({
  sanitize: false
}).tooltip('show')
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.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" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<button type="button" class="btn btn-secondary testtooltip" data-toggle="tooltip" data-html="true" data-container="body" data-placement="bottom" title="<table class=\'kpiTableHov\'><tr><td colspan=\'2\' class=\'text-center\'>Total Accidents</td></tr><tr><td>Year Total &nbsp;</td><td>&nbsp;/ % change from previous year</td></tr></table>">
  Tooltip
</button>

Note that for security reasons the sanitize, sanitizeFn and whiteList options cannot be supplied using data attributes.

Upvotes: 7

Related Questions