title: Popovers in Bootstrap 2.2.1
body: <p>I am trying to use Bootstrap popover element in my app.</p>
  
  <p>But it doesn't seem to work. When I put the popovers in a div which has the overflow style property set. </p>
  
  <p>However, the same code used to work in the previous bootstrap version.</p>
  
  <p>You can see what I mean in this jsFiddle
  <a href="http://jsfiddle.net/rKDY5/3/" rel="nofollow">jsFiddle</a></p>
  
  <p>What has gone wrong here??</p>
  
  <p>Here is the relevant code --</p>
  
  <p>HTML -</p>
  
  <pre><code>   &lt;body&gt;
         &lt;a href="#"  rel="popover" data-content="test" data-original-title="hello" style="position: absolute; top: 300px; left: 300px;"&gt;This works&lt;/a&gt;
     &lt;div id="cartridges"&gt;
         &lt;div class="relative"&gt;
             &lt;div id="listCartridges"&gt;
                 &lt;ul&gt;
                     &lt;li&gt;
                         &lt;a href="#"  rel="popover" data-content="test" data-original-title="hello"&gt;This doesnt work&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li&gt;
                         &lt;a href="#"  rel="popover" data-content="test" data-original-title="hello"&gt;This doesnt work&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li&gt;
                         &lt;a href="#"  rel="popover" data-content="test" data-original-title="hello"&gt;This doesnt work&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li&gt;
                         &lt;a href="#"  rel="popover" data-content="test" data-original-title="hello"&gt;This doesnt work&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li&gt;
                         &lt;a href="#"  rel="popover" data-content="test" data-original-title="hello"&gt;This doesnt work&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li&gt;
                         &lt;a href="#"  rel="popover" data-content="test" data-original-title="hello"&gt;This doesnt work&lt;/a&gt;
                     &lt;/li&gt;
                 &lt;/ul&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
                     &lt;/body&gt;
  </code></pre>
  
  <p>CSS --</p>
  
  <pre><code>@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css');
  
  body {
      background: #666;
  }
  
  #cartridges {
      position: fixed;
      overflow: visible !important;
      bottom: 0;
      left: 0
      width: 100%;
      border-top: 1px solid #AAA;
  }
  
  #cartridges &gt; .relative {
      width: 100%;
      height: 100%;
  }
  
  #listCartridges {
      width: 100%;
      background: #222;
  }
  
  #listCartridges &gt; ul {
      display: inline-block;
      overflow-x: scroll;
      overflow-y: hidden;
      max-width: 100%;
      white-space: nowrap;
  }
  
  #listCartridges &gt; ul &gt; li {
      display: inline-block;
      margin: 3px;
      padding: 3px;
      position: relative;
      vertical-align:middle;
      border: 1px solid #474747;
      overflow: none;
  }
  </code></pre>
  
  <p>JS --</p>
  
  <pre><code>$("[rel=popover]").popover({
      animation: true,
      trigger: 'click',
      offset: 10,
      placement: 'top',
      delay: {
          show: 500,
          hide: 100
      }
  }).click(function(e) {
      e.preventDefault();
  });​
  </code></pre>