1

通过将以下标记直接添加到我的表格单元格中，我在表格 ( 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 文档和论坛，但找不到任何有用的东西。有谁知道什么可能导致这种失踪？非常感谢您的帮助！

4

3 回答 3

2

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

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

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

演示

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

演示 2

于 2015-05-26T20:02:47.627 回答
0

对于引导程序 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>
于 2018-07-11T01:44:37.650 回答
0

我今天遇到了这个问题

如果您希望工具提示返回，您需要再次触发它们，（或重新生成）通过$('[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，但不足以让人类使用工具提示来指向元素！

于 2022-01-06T20:31:28.617 回答