Popover gets hidden under the nav bar in Twitter Bootstrap

Question

I have a help button within my navbar, with a popover functionality.

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
           <div class="nav pull-right">
               <div class="cb_inline_block">               
                   <a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"><i class="icon-question-sign icon-large"></i></a>

Javascript:

$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };

function show_timezone_help(event){
    event.preventDefault();
    $('.timezone_help').popover('show');
}

But when I click on it the popover is hidden behind the nav bar.

Do I really have to set the z-index manually? That would be painful. SUrely I must be doing something wrong. Thanks.

Answer 1

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