19

这是我的代码：

HTML：

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

查询：

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

CSS：

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

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

我怎样才能解决这个问题？

4

3 回答 3

44

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

$('a[data-toggle="tooltip"]').tooltip({
   animated : 'fade',
   placement : 'bottom',
   container: 'body'
});
于 2013-10-28T15:02:11.203 回答
2

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

于 2019-02-27T14:02:21.153 回答
0

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

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

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

于 2013-10-28T13:51:22.157 回答