我正在尝试在同一页面中使用 Twitter Bootstrap tabbable 和 Bootstrap popovers。我在解决无法超出选项卡限制的弹出窗口问题时遇到困难(问题是当弹出窗口出现在边框旁边时，它是半隐藏的)。
我不是 JQuery 方面的专家，但据我了解，问题出在“iframe”中创建的选项卡，而弹出窗口无法显示在其“iframe”之外。
有什么办法可以解决这个问题吗？ (=即使靠近选项卡的边框也能正确显示弹出窗口？)
非常感谢!
下面是显示我的问题的示例代码(准备复制/粘贴到 .html http://jsfiddle.net/7PU2D/ 中):
<!DOCTYPE html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="span2">
Left column
</div>
<div class="span6">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
<li><a href="#tab2" data-toggle="tab">tab2</a></li>
<li><a href="#tab3" data-toggle="tab">tab3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">tab1 text
<div class="well">
<a href="#" class="btn btn-danger" rel="popover" style="position: relative;" data-content="And here's some amazing content. It's very engaging. right? " data-original-title="A Title">hover for popover</a>
</div>
</div>
<div id="tab2" class="tab-pane">tab2 text</div>
<div id="tab3" class="tab-pane">tab3 taxt</div>
</div>
</div>
</div>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script>
$(function(){
$('a[rel=popover]').popover({
trigger: 'hover',
placement: 'in bottom',
animate: true,
delay: 500,
});
});
</script>
</body>
最佳答案
使用“容器”选项。这样你就可以将 popover/tip 附加到 body 元素，它不会被选项卡 Pane overflow:hidden...example 切断:
<script>
$(function(){
$('a[rel=popover]').popover({
trigger: 'hover',
placement: 'in bottom',
animate: true,
delay: 500,
container: 'body'
});
});
</script>
或:
<a rel="popover" data-container="body">Pop Me Open</a>
您的工具提示仍将正确放置在您的链接旁边，但由于它现在附加到 body 标签，它不会被选项卡 Pane “半隐藏”。
在 Bootstrap 站点上查看工具提示/弹出框的文档...
2.3.2:
http://getbootstrap.com/2.3.2/javascript.html#popovers
或 3.0
关于javascript - Bootstrap tabbable 和 popover 之间的冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11343327/