CODEWITHSUNDEEP
csstwitter-bootstrap
Houman
Houman

Reputation: 66320

Popover gets hidden under the nav bar in Twitter Bootstrap

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.

enter image description here

Upvotes: 10

Views: 18734

Answers (4)

Daniel
Daniel

Reputation: 9521

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

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

Upvotes: 0

Fabio Souza
Fabio Souza

Reputation: 121

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

Upvotes: 1

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10562

set these properties:

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

z-index should be max limit.

Upvotes: 0

merv
merv

Reputation: 76740

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

Upvotes: 19

Related Questions