bootstrap popover not showing on top of all elements

Question

I'm working on a bootstrap site and after updating to bootstrap 2.2 from 2.0 everything worked except the popover.

The popovers still show up fine, but they don't show up on top of all other elements.

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

Anyone have any idea on why the behavior of the popover changed, or how I can fix it? Thanks.

Solution 1

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

Solution 2

This is Working for me

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

Solution 3

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.

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Kyle]

I will try to make a jsfiddle and post back if i do not find it, but i tried making the popover a z-index of 9999 with no luck.

[Pawan Pillai]

This really helped. I made the following change in the popover initialization and it worked: $('#element').popover({ container: 'body', //other parameters });

[NoBrainer]

I got a 404 for that link. Update, please?

[Kyle]

@NoBrainer Can't seem to find a new link for it, but adding data-container="body" to the html element should work, or passing in container: 'body' through javascript should also work

[Will Tartak]

thanks for pointing out the default z-index value of the popover.

[bulanmaster]

adding data-container="body" seems to work in bootstrap 3 as well for tooltips, when they are for example in overflow

[Sebastian]

You're a life saver!! All the answers I read were about z-index and to be honest it was the only thing that made sense for me, but at the end, none of the suggestions worked until I decided to try your z-index unrelated answer! Thanx

[MSC]

While this sorts out the original z-index issue, the popover doesn't stick with the original trigger element once you start dragging things around the screen, zooming in or out, or resizing the window. Looking for a better answer for this myself.

[Alpana Chauhan]

@Kyle this did fxed the issue for me on desktop browsers and mobile, but i am stil facing the issue with IPad Air, any suggestion why its not working there?

[Kyle]

@AlpanaChauhan what version of bootstrap are you using? can you post a jsfiddle?

[Nirman]

This worked for me as well. its important to know what value needs to be set for "container" property. Just for reference, contents copied from bootstrap popovers document - "When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom container so that the popover’s HTML appears within that element instead."

[Christopher Smit]

In my case I needed it to show above a chatbox. Changing 'body' to the class name of my chat window, fixed the issue for me. Thank you!

[Yashash Gaurav]

Valid for bootstrap tooltips too $('[data-toggle="tooltip"]').tooltip({ container: 'body' })

[Diego D]

and yes it happened.. I just copied and pasted and it solved the problems I was having with placing the popover on top... container: body didn't work, changing the styles of anything closely related didn't work.. I don't what's the magic here and didn't have time to find out but it just worked :) thanks :)