title: How to make bootstrap 3 tooltip work with parent div with overflow:hidden?
body: <p>Here's my code:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="cart"&gt;
     &lt;a data-toggle="tooltip" title="add to cart"&gt;
         &lt;i class="fa fa-cart"&gt;&lt;/i&gt;
     &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code> $('a[data-toggle="tooltip"]').tooltip({
     animated : 'fade',
     placement : 'bottom'
  });
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.cart{
     overflow:hidden;
     padding:10px 3px;
  }
  </code></pre>
  
  <p>When I hover the cart icon, the tooltip shows, but it is not at the top of the cart box.</p>
  
  <p>How can I fix this?</p>