How to make bootstrap 3 tooltip work with parent div with overflow:hidden?

Question

Here's my code:

HTML:

<div class="cart">
   <a data-toggle="tooltip" title="add to cart">
       <i class="fa fa-cart"></i>
   </a>
</div>

JQuery:

 $('a[data-toggle="tooltip"]').tooltip({
   animated : 'fade',
   placement : 'bottom'
});

CSS:

.cart{
   overflow:hidden;
   padding:10px 3px;
}

When I hover the cart icon, the tooltip shows, but it is not at the top of the cart box.

How can I fix this?

Answer 1

You can use container attribute so tooltip itself will be placed in parent container or event body element and it won't break even with overflow hidden because it will be positioned absolutely.

$('a[data-toggle="tooltip"]').tooltip({
   animated : 'fade',
   placement : 'bottom',
   container: 'body'
});

Answer 2

You can also simply add data-container="body" to the tooltipped element. E.g. <button type="submit" title="Add Record to Book Bag" data-toggle="tooltip" data-container="body" aria-role="button"> ... </button>