如何使 bootstrap 3 工具提示与具有溢出的父 div 一起工作：隐藏？答案

【问题标题】：How to make bootstrap 3 tooltip work with parent div with overflow:hidden?如何使 bootstrap 3 工具提示与具有溢出的父 div 一起工作：隐藏？
【发布时间】：2013-11-06 23:40:28
【问题描述】：

这是我的代码：

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

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

我该如何解决这个问题？

【问题讨论】：

修复 - 不要使用overflow:hidden
如果你想让它在图标的顶部，然后使用'top'，或者请显示问题的图像
这是代码的fiddle。我真的没有看到问题是什么。 @PeterJack，您可以使用/修改它或添加屏幕截图来演示问题所在。

标签： jquery css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

有些用户可能还需要调整 .popover 的 z-index，尤其是在从模态框内触发弹出框时。
如果要在 HTML 中指定容器，请使用属性“data-container”

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：