Здесь мой код:
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;
}
Когда я нахожу значок корзины, всплывающая подсказка показывает, но она не находится в верхней части корзины.
Как я могу это исправить?
Вы можете использовать атрибут container, поэтому сама подсказка будет размещена в родительском контейнере или элементе тела события, и она не будет ломаться даже при переполнении, потому что она будет помещена абсолютно.
$('a[data-toggle="tooltip"]').tooltip({
animated : 'fade',
placement : 'bottom',
container: 'body'
});
Как предложил @Morpheus - не используйте overflow:hidden. Вы делаете это как трюк с плавающей точкой? Если это так, используйте другой файл clearfix hack с использованием псевдоэлемента. (http://www.webtoolkit.info/css-clearfix.html)
В качестве альтернативы, если вы должны использовать overflow:hidden, и вы используете Tooltip v3, есть опция с именем container, которая используется для указания селектора, к которому будет добавлен элемент подсказки.