Datatables表头中的Bootstrap工具提示闪烁

时间:2022-01-01 22:20:08

So I'm having some trouble getting a bootstrap tooltip to work inside a datatables object, specifically the header. What I believe to be happening is the onhover event of the table header is firing and interfering with bootstraps hover event. Now I tried using a high Z-Index but that doesn't seem to help. It looks like there is only a few pixels where the actual tooltip is being created, but it often is created and then disappears in the same location

因此,我在使用引导工具提示在数据表对象(尤其是标题)内工作时遇到了一些麻烦。我认为发生的事情是表头的onhover事件正在触发并干扰bootstraps悬停事件。现在我尝试使用高Z-Index,但这似乎没有帮助。看起来只有几个像素在哪里创建实际的工具提示,但它经常被创建然后在同一位置消失

This is the header that I am working with and any relevant CSS & Javascript code

这是我正在使用的标题以及任何相关的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>

1 个解决方案

#1


0  

In case anybody ever reads this, I had the same issue and it was solved by setting the container to body:

如果有人读过这个,我有同样的问题,它通过将容器设置为body来解决:

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

#1


0  

In case anybody ever reads this, I had the same issue and it was solved by setting the container to body:

如果有人读过这个,我有同样的问题,它通过将容器设置为body来解决:

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