Bootstrap 工具提示在排序时消失 Table

Question

我通过将以下标记直接添加到我的 table 单元格中，在我的 table (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>

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

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

虽然它在加载 table 时完美运行，但一旦我对 table 进行排序，table 单元格中的 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 列以按该列对 table 进行排序时，如果我在下面添加重新绘制 table 后触发的函数，则工具提示在排序后可以正常工作。

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

Answer 3

我今天遇到了这个问题

如果你想返回工具提示，你需要通过 $('[data-toggle="tooltip"]').tooltip();

再次触发它们（或重新生成它们）

当它们消失了，或者您认为它们应该存在时，如果您从浏览器控制台执行 $('[data-toggle="tooltip"]').tooltip();，它们应该会回来。

我尝试使用 click 或 mouseup 事件。即使 post-body.bs.table 或 all.bs.table 也不够。

一切都是关于 DOM 更新，因此，在正确的时间或至少在合适的时间触发代码。

这是我的解决方案，或者主要是 hack，使用 setTimeout() 给 DOM 一些时间进行更新。

$(function () {
    tooltipExe();
    $('#table-id th').click(function(e) {
        setTimeout(function() {
            tooltipExe();
        }, 200);
    });
});

超时延迟，由您决定：有足够的时间让机器更新 DOM，但不足以让人类用工具提示指向元素！

Bootstrap 工具提示在排序时消失 Table

Bootstrap Tooltips Disappear Upon Sorting Table

javascript

jquery

twitter-bootstrap

bootstrap-table