Как сделать bootstrap 3 tooltip работать с родительским div с переполнением: скрыто?

Здесь мой код:

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;
}

Когда я нахожу значок корзины, всплывающая подсказка показывает, но она не находится в верхней части корзины.

Как я могу это исправить?

Ответ 1

Вы можете использовать атрибут container, поэтому сама подсказка будет размещена в родительском контейнере или элементе тела события, и она не будет ломаться даже при переполнении, потому что она будет помещена абсолютно.

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

Ответ 2

Как предложил @Morpheus - не используйте overflow:hidden. Вы делаете это как трюк с плавающей точкой? Если это так, используйте другой файл clearfix hack с использованием псевдоэлемента. (http://www.webtoolkit.info/css-clearfix.html)

В качестве альтернативы, если вы должны использовать overflow:hidden, и вы используете Tooltip v3, есть опция с именем container, которая используется для указания селектора, к которому будет добавлен элемент подсказки.

http://getbootstrap.com/javascript/#tooltips