我想要一个popover包含在一个可折叠的div:
http://jsfiddle.net/nathan9/qgyS7/中.但是,popover似乎仅限于div的范围.有没有办法防止剪辑?
<a href="#toggle" data-toggle="collapse" data-target="#toggle" onClick="return false;">Toggle collapse</a>
<div id="toggle" class="collapse" style="background-color: yellow">
Content of collapsible div. Click for popover:
<i class="icon-info-sign" id="info"></i>
</div>
…
<script>
$('#info').popover({ html: true,placement: 'left',title: 'Popover',content: "<ul><li>The</li><li>popover</li><li>is</li><li>clipped.</li></ul>" });
</script>
解决方法
使用计时器始终是一项有风险的业务.我使用了Mike Lucid的一个变种,它可以收听可折叠事件,显示和隐藏.
Here is a working fiddle
代码如下:
$(document).ready(function(){
$('#toggle')
.on('shown',function(evnt) {
$(evnt.target).addClass('visible');
})
.on('hide',function(evnt) {
$(evnt.target).removeClass('visible');
})
;
});
如果您希望可折叠在加载时可见,请不要忘记在可折叠div中添加类和可见.
编辑
从Bootstrap 2.3开始,工具提示和弹出框有一个新的容器选项.如果将容器设置为“body”,则不会剪切工具提示和弹出窗口. Here is a working fiddle.
希望有所帮助.