Popover gets hidden under the nav bar in Twitter Bootstrap

Answer 1

set these properties:

data-container="body" style="z-index:1000; position:relative"

z-index should be max limit.

Answer 2

For me, I needed to set the container of my popover to body and the z-index

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

Answer 3

In my case, I decided as follow:

.navbar-fixed-top {
  z-index:1061;
}

Popovers default to index 1060, so anything that is above 1060 is positioned over Popovers

Sory for the wrong English I'm Brasilian and I am using Google Translate

Answer 4

First, the answer to your question is that popovers are not intended to be used in a fixed navbar. In the variables.less, you will find the following list of z-indexes:

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1030;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

As you can see, Popovers are intended to slip beneath the fixed navbar. However, you will notice that Tooltips will not, and you can also use trigger: 'click' on tooltips.

Otherwise, if you are deadset on the popover, you are going to have to manually change it's z-index. The following will activate it and permanently change it's z-index, so you don't have to worry about doing it every time it shows, or anything like that:

$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index', 1030);​​​​​​​​​​​​​​​​​​​​​​​​

JSFiddle

---

Second, just an explanation as to why my example seemed to work, whereas yours didn't.

The significant point of difference between our two examples (mmfansler JSFiddle and houmie JSFiddle) was actually not a difference between 2.1.0 and 2.1.1. Both of them have z-index: 1030 for fixed navbars and z-index: 1010 for popovers (which is what your complaining about).

The real point of difference is that my 2.1.0 example is also loading the responsive code. For some reason BootstrapCDN changed the naming convention:

• bootstrap.min.css in 2.1.0 was a combined version
• bootstrap.min.css in 2.1.1 in the non-responsive only

I suspect this is a mistake, since as of me writing this bootstrap-combined.min.css is also non-responsive only!

Anyway, the only difference between the two which affects the popover display is:

.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

This rule however, only holds for certain media queries (which of course in JSFiddle gets activated since the viewport of the render is small).

Otherwise, when the navbar isn't static, you will continue to see the popovers beneath the navbar.

You might want to keep an eye on the BootstrapCDN Issue #41