我正在尝试在同一页面中使用 Twitter Bootstrap tabbable 和 Bootstrap popovers。我在解决弹出窗口无法出现在选项卡限制之外的问题时遇到困难（问题是当弹出窗口出现在边框旁边时，它是半隐藏的）。
我不是 JQuery 专家，但据我了解，问题来自于在“iframe”中创建的选项卡，并且弹出窗口无法显示在“iframe”之外。
有什么办法可以解决这个问题吗？ （= 即使靠近选项卡边框也能正确显示弹出窗口？）
多谢！
下面是显示我的问题的示例代码（准备复制/粘贴到 .htmlhttp://jsfiddle.net/7PU2D/ 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>
使用“容器”选项。这样，您可以将弹出框/提示附加到主体元素，这样它就不会被选项卡窗格溢出：隐藏...示例：
<script>
$(function(){
$('a[rel=popover]').popover({
trigger: 'hover',
placement: 'in bottom',
animate: true,
delay: 500,
container: 'body'
});
});
</script>
or:
<a rel="popover" data-container="body">Pop Me Open</a>
您的工具提示仍将正确放置在链接旁边，但由于它现在附加到正文标记，因此它不会被选项卡窗格“半隐藏”。
请参阅引导站点上的工具提示/弹出窗口的文档...
2.3.2:
http://getbootstrap.com/2.3.2/javascript.html#popovers http://getbootstrap.com/2.3.2/javascript.html#popovers
or 3.0
http://getbootstrap.com/javascript/#popovers http://getbootstrap.com/javascript/#popovers
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
