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>

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>

• javascript
• jquery
• css
• twitter-bootstrap
• datatables

Share Improve this question Follow asked Nov 24, 2015 at 10:21 chiloutuschiloutus 33311 gold badge33 silver badges1010 bronze badges 3

• Can you replaicte this in a fiddle? It sounds a little bit weird. There should be no reason for bootstrap tooltip causing conflicts with anything in dataTables. – davidkonrad Commented Nov 24, 2015 at 10:30
• Sure let me see what I can do – chiloutus Commented Nov 24, 2015 at 10:31
• I can't actually reproduce this in a fiddle, maybe it's something we're doing in the application causing this issue. – chiloutus Commented Nov 24, 2015 at 10:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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.

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

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

);