引导程序不会在工具提示中显示表格

时间:2019-07-25 11:03:39

标签: bootstrap-4

我正在看一个去年的项目,我意识到Bootstrap不再在工具提示中显示table

在去年我更新了Bootstrap期间,我们拥有另一个项目的共享资产,并且我使用相同的版本。

我当前使用的是Bootstrap 4.3.1,当我去年创建项目时似乎正在使用4.1.0,我用V 4.1.0替换了JS,它可以正常工作

这是我用来打印html的PHP代码

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>"';

如果我更改了table并使其正常工作,可能是什么问题?

如果我使用Javascript $('.testtooltip').tooltip('show')强制工具提示显示它,并且我检查了html末尾的bootstrap元素,则为空,没有任何内容。 enter image description here

1 个答案:

答案 0 :(得分:0)

您正在搜索https://github.com/directus/extension-toolkit选项

$('.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>

注意,出于安全原因,不能使用数据属性来提供sanitize,sanitizeFn和whiteList选项。