Bootstrap 工具提示在排序表时消失答案

【问题标题】：Bootstrap Tooltips Disappear Upon Sorting TableBootstrap 工具提示在排序表时消失
【发布时间】：2015-05-26 19:26:13
【问题描述】：

通过将以下标记直接添加到我的表格单元格中，我在表格 (http://jsfiddle.net/mademoiselletse/bypbqboe/66/) 中包含了一些引导工具提示（由 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 JS documentation 和论坛，但找不到任何有用的东西。有谁知道什么可能导致这种失踪？非常感谢您的帮助！

【问题讨论】：

你能把你的代码放到fiddler里吗？
听起来您可能需要在排序后重新初始化工具提示？这可能并不理想。

标签： javascript jquery twitter-bootstrap bootstrap-table

【解决方案1】：

是的，Bootstrap 一定会破坏您的工具提示绑定。在排序回调上运行它：

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

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

Demo

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

Demo 2

【讨论】：

【解决方案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>

【讨论】：

【解决方案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，但不足以让人类使用工具提示来指向元素！

【讨论】：