jQuery 如何使引导程序 3 工具提示与溢出的父 div 一起使用：隐藏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19630749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap 3 tooltip work with parent div with overflow:hidden?
提问by Peter Hyman
Here's my code:
这是我的代码：
HTML:
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:
CSS:
.cart{
overflow:hidden;
padding:10px 3px;
}
When I hover the cart icon, the tooltip shows, but it is not at the top of the cart box.
当我将鼠标悬停在购物车图标上时，会显示工具提示，但它不在购物车框的顶部。
How can I fix this?
我怎样才能解决这个问题？
回答by Vytautas Butkus
You can use containerattribute so tooltip itself will be placed in parent container or event body element and it won't break even with overflow hidden because it will be positioned absolutely.
您可以使用container属性，因此工具提示本身将被放置在父容器或事件正文元素中，并且它不会在溢出隐藏时收支平衡，因为它将被绝对定位。
$('a[data-toggle="tooltip"]').tooltip({
animated : 'fade',
placement : 'bottom',
container: 'body'
});
回答by Claas Kazzer
You can also simply add data-container="body" to the tooltipped element. E.g. <button type="submit" title="Add Record to Book Bag" data-toggle="tooltip" data-container="body" aria-role="button"> ... </button>
您也可以简单地将 data-container="body" 添加到工具提示元素。例如<button type="submit" title="Add Record to Book Bag" data-toggle="tooltip" data-container="body" aria-role="button"> ... </button>
回答by Adam
As @Morpheus suggested - don't use overflow:hidden. Are you doing this as a float-clearing trick? If so, use the other clearfix hack using pseudo element. (http://www.webtoolkit.info/css-clearfix.html)
正如@Morpheus 建议的那样-不要使用overflow:hidden. 你这样做是为了浮动清除技巧吗？如果是这样，请使用伪元素使用其他 clearfix hack。( http://www.webtoolkit.info/css-clearfix.html)
Alternatively, if you must use overflow:hiddenand you are using Tooltip v3 there is an option called containerwhich is used to specify a selector to which the tooltip element will be appended.
或者，如果您必须使用overflow:hidden并且您正在使用 Tooltip v3，则有一个名为的选项container，用于指定将附加工具提示元素的选择器。
