数据表表头闪烁中的引导工具提示答案

【问题标题】：Bootstrap tooltip in Datatables table header flickering数据表表头闪烁中的引导工具提示
【发布时间】：2016-02-26 17:44:36
【问题描述】：

所以我在让引导工具提示在数据表对象（特别是标题）中工作时遇到了一些麻烦。我认为正在发生的是表头的悬停事件正在触发并干扰引导程序悬停事件。现在我尝试使用高 Z-Index 但这似乎没有帮助。看起来只有几个像素正在创建实际的工具提示，但它经常被创建然后消失在同一个位置

这是我正在使用的标头以及任何相关的 CSS 和 Javascript 代码

{title:"Status <div id=statusHelp class='statusHelp' > </div>" data:obj}

.statusHelp {
background-image: '../img/Circle_ques_icon.svg';
height: 15px;
width: 15px;
z-index: 10000;

}

<span>Status <div id="statusHelp" class="statusHelp" data-original-title="" title=""> </div></span>

【问题讨论】：

你能在小提琴中复制这个吗？听起来有点奇怪。引导工具提示应该没有理由与 dataTables 中的任何内容发生冲突。
当然让我看看我能做什么
我实际上无法在小提琴中重现这个，也许这是我们在应用程序中所做的事情导致了这个问题。

标签： javascript jquery css twitter-bootstrap datatables

【解决方案1】：

仅添加 container: 'body' 对我来说并不适用。我还必须添加boundary: 'window'。

$('[data-toggle="tooltip"]').tooltip({
        boundary: 'window',
        container: 'body'
    });

我将工具提示放在top 上，当表格中只有一条记录时，此更改防止它们翻转。

【讨论】：

【解决方案2】：

如果有人读过这篇文章，我遇到了同样的问题，通过将容器设置为 body 解决了这个问题：

            $('body').tooltip({
                selector: '[rel=tooltip]',
                placement: 'auto',
                fallbackPlacement: 'flip',
                container: 'body'
            });

【讨论】：

把它作为dataTable({options...})的“drawCallback”选项——谢谢！

【解决方案3】：

停止数据表中闪烁的代码适用于标题和正文。我两个都有问题。

$('[data-toggle="tooltip"]').tooltip(
    {
        container: 'body'
    }

);

【讨论】：