title: Popover truncated when inside a collapsed navbar, in bootstrap3
body: <p>Setting up the question, here is the <em>situation</em>, the <em>problem</em>, the <em>screenshot</em>, and the <em>code</em>:</p>
  
  <p><strong>The situation:</strong></p>
  
  <ul>
  <li><p>In my responsive <code>bootstrap3</code> layout, there is a <code>navbar</code> which is <code>fixed-top</code>.</p></li>
  <li><p>I have the <code>collapse</code> information in place, as shown in the documentation.</p></li>
  <li><p>There is a button/link in the <code>navbar</code> which invokes a <code>popover</code>.</p></li>
  </ul>
  
  <p><strong>The problem:</strong></p>
  
  <p>When the <code>navbar</code> is in its collapsed state, the <code>popover</code> is hidden within the scrollable area allotted to the <code>navbar</code> options.</p>
  
  <p><strong>The screenshot:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/PsgOO.png" alt="enter image description here"></p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-topnav"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="/"&gt;
              &lt;span class="fa fa-home"&gt;&lt;/span&gt;
          Unearth Synergy
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="navbar-collapse-topnav"&gt;
          &lt;ul class="nav navbar-nav navbar-left"&gt;
      &lt;li&gt;&lt;a popover="signin_form" href="#"&gt;Sign In&lt;span class="fa fa-sign-in"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The JavaScript:</strong></p>
  
  <pre><code>$('body').popover({
      selector: '[popover]',
      placement: "auto bottom",
      html: true,
      content: function() {
          return $('#'+$(this).attr("popover")).html();
      }
  });
  </code></pre>
  
  <p><strong>So how do I show the popover <em>outside</em> the collapsed <code>navbar</code> in the main content area itself?</strong> </p>
  
  <p>I obviously do not want the content in the popover to be locked within the scrollable region caused by <code>bootstrap</code> allocating a fixed-height scrollable region for <code>navbar</code> items.</p>
  
  <p>I've seen questions similar to this asked about <code>dropdown</code> elements, but nothing about <code>popover</code> elements which are an entirely different situation. Since this issue seems to be relevant to <code>bootstrap</code> use, I am posting it, answering it, and leaving this at the point where a slight improvement can be made if anyone is interested.</p>