title: Popover gets hidden under the nav bar in Twitter Bootstrap
body: <p>I have a help button within my navbar, with a popover functionality.</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
             &lt;div class="nav pull-right"&gt;
                 &lt;div class="cb_inline_block"&gt;               
                     &lt;a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"&gt;&lt;i class="icon-question-sign icon-large"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };
  
  function show_timezone_help(event){
      event.preventDefault();
      $('.timezone_help').popover('show');
  }
  </code></pre>
  
  <p>But when I click on it the popover is hidden behind the nav bar.</p>
  
  <p>Do I really have to set the z-index manually? That would be painful.  SUrely I must be doing something wrong. Thanks.</p>
  
  <p><img src="https://i.stack.imgur.com/mL8e3.png" alt="enter image description here"></p>