Datatables表标题闪烁时的Bootstrap工具提示

Question

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

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

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

Answer 1

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

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

Answer 2

Code to stop the flickering in dataTable works for both headers and body. I had the problem on both.

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

);

Answer 3

Just adding the container: 'body' didn't do it for me. I also had to add boundary: 'window' .

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

I have my tooltips set placed on the top and this change prevented them from flipping when only one record was present in the table.