Question

我在表（http://jsfiddle.net/mademoiselletse/bypbqboe/66/）中添加了一些Bootstrap工具提示（由glyphicons表示），方法是将以下标记直接添加到我的表格单元格中：

<i class="glyphicon glyphicon-tags" data-toggle="tooltip" data-placement="right" data-title="this is a tooltip glyphicon"></i>

我每次加载表时都会触发tooltipExe ()来初始化工具提示（第56,82,109,117行），定义如下：

function tooltipExe () {
$('[data-toggle="tooltip"]').tooltip()
};

虽然在加载表时它可以很好地工作，但是一旦我对表进行排序，表格单元格中的Bootstrap工具提示效果就会奇怪地消失。我查看了Bootstrap JS documentation和论坛，但找不到任何有用的信息。有谁知道什么可能导致这种失踪？我非常感谢你的帮助！

Answer 1

是的，Bootstrap必须做一些破坏你的工具提示绑定的东西。在排序回调上运行它：

$table.on('sort.bs.table', function () {
    tooltipExe();
});

更新：排序事件不起作用，可能是因为它在排序操作开始时触发，所以我选择了all.bs.table。我看到了排序后事件has been requested。

<强> Demo

再次更新：我从Github线程中看到，您可以使用post-body.bs.table事件来减少函数调用次数。

<强> Demo 2

Answer 2

对于bootstrap 4，下面发布的代码对我有用。当我单击表格列以按该列对表格进行排序时，如果我在重新绘制表格后在下方添加了触发该功能的函数，则工具提示在排序后仍可以正常工作。

<table id="smmrytbl" class="compact striped table-hover dt-responsive display"></table>
<script type="text/javascript" class="init">
$(document).ready(function() {
    var table = $('#smmrytbl').DataTable( {
    [...]   
    } );
});
$('#smmrytbl').on( 'draw.dt', function () {        
    $('[data-toggle="tooltip"]').tooltip('update');
});
</script>

我的所有工具提示均按以下示例所示进行设置：

<span data-toggle="tooltip" data-placement="bottom" data-html="true" title="5<sup>th</sup> Percentile">42</span>

排序表时，Bootstrap工具提示消失

2 个答案: