CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatatables
chiloutus
chiloutus

Reputation: 333

Bootstrap tooltip in Datatables table header flickering

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>

Upvotes: 3

Views: 2543

Answers (3)

Kyle Fowlie
Kyle Fowlie

Reputation: 63

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 placed on the top and this change prevented them from flipping when only one record was present in the table.

Upvotes: 6

Wayne Beck
Wayne Beck

Reputation: 1

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'
    }

);

Upvotes: 0

Dani&#235;l Camps
Dani&#235;l Camps

Reputation: 1809

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'
            });

Upvotes: 1

Related Questions