Question

这是我的代码：

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

当我悬停购物车图标时，工具提示会显示，但它不在购物车框的顶部。

我该如何解决这个问题？

Answer 1

您可以使用container属性，因此工具提示本身将放置在父容器或事件主体元素中，即使隐藏溢出也不会中断，因为它将被绝对定位。

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

Answer 2

正如@Morpheus建议的那样 - 不要使用overflow:hidden。你这样做是一个浮动清除技巧吗？如果是这样，请使用其他clearfix hack使用伪元素。（http://www.webtoolkit.info/css-clearfix.html）

或者，如果您必须使用overflow:hidden并且您正在使用Tooltip v3，则会有一个名为container的选项，用于指定将附加工具提示元素的选择器。

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

Answer 3

您还可以简单地将data-container =“ body”添加到工具提示的元素中。例如。 <button type="submit" title="Add Record to Book Bag" data-toggle="tooltip" data-container="body" aria-role="button"> ... </button>

如何让bootstrap 3工具提示与父div一起使用overflow：hidden？

3 个答案: