Bootstrap popover剪裁到包含div的范围

Question

我想在一个可折叠的div中包含一个popover: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>

Answer 1

使用计时器始终是一项有风险的业务.我使用了Mike Lucid的一个变体,它听取了可折叠的事件,显示和隐藏.

这是一个工作小提琴

代码如下:

$(document).ready(function(){
  $('#toggle')
    .on('shown', function(evnt) {
      $(evnt.target).addClass('visible');  
    })
    .on('hide', function(evnt) {
      $(evnt.target).removeClass('visible');  
    })
  ;   
});

如果您希望可折叠在加载时可见,请不要忘记在可折叠div中添加类和可见.

编辑

从Bootstrap 2.3开始,工具提示和弹出框有一个新container选项.如果将容器设置为"body",则不会剪裁工具提示和弹出窗口.这是一个工作小提琴.

希望有所帮助.

Answer 2

添加.collapse.in {overflow:visible}似乎可以解决问题

http://jsfiddle.net/ZArX7/

编辑：以上答案仅适用于 Chrome

这是一段延迟添加类的jquery。

     $('#toggle_link').click(function() {
    if($('#toggle').hasClass('in')){
        $('#toggle').removeClass('visible');
    }else{
        setTimeout(function() {
            $('#toggle').addClass('visible');
        }, 1000);
    }
});   

这个解决方案有效

http://jsfiddle.net/fnP7y/