bootstrap popover not showing on top of all elements

Question

I was able to solve the problem by setting data-container="body" on the html element

HTML example:

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript example:

$('your element').tooltip({ container: 'body' }) 

Discovered from this link: https://github.com/twitter/bootstrap/issues/5889

This is Working for me

$().popover({container: 'body'})

I just had a situation that was similar to this, involving the DataTables JQuery library with scrolling enabled.

What turned out to be had nothing to do with Z-indices, but with one of the enclosing divs having the CSS overflow property set as hidden.

I fixed it by adding an event to my element triggering the popover which also changed the overflow property of the responsible div to visible.

The most probable cause is that the content displaying over the popover has a higher z-index. Without the precise code/style, I can offer two options :

You should try pinpointing the exact elements with a web inspector (usually F12 on your favorite browser) and check their actual z-index.

If you find this value, you can set it lower than the popover which is z-index: 1010; by default

---

Or the other approach, not as good, would be to increase the z-index of the popover. You can do that either with the @zindexPopover in the Less files or directly by overriding

.popover {
    z-index: 1010; /* A value higher than 1010 that solves the problem */
}

---

If you can't find a solution, you should try reproducing the bug in something like this jsfiddle - you will probably resolve the problem while trying to get the bug.

I had a similar issue with 2 fixed elements - even though the z-index heirachy was correct, the bootstrap tooltip was hidden behind the one element wth a lower z-index.

Adding data-container="body" resolved the issue and now works as expected.