Как заставить Bootstrap 3 tooltip работать с родительским div с overflow: hidden?

вот мой код:

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

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

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

10
css jquery twitter-bootstrap

2 ответов

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

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

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

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

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

0