Bootstrap 弹出窗口被裁剪到包含 div 的范围

我希望将弹出窗口包含在可折叠 div 中：http://jsfiddle.net/nathan9/qgyS7/ http://jsfiddle.net/nathan9/qgyS7/。然而，弹出窗口似乎仅限于 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 的一个变体，它监听可折叠事件、显示和隐藏。

这是一个工作小提琴 http://jsfiddle.net/CdNuX/2/

代码如下：

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

如果您希望可折叠在加载时可见，请不要忘记添加类in and visible到你的折叠式div.

Edit

从 Bootstrap 2.3 开始，工具提示和弹出窗口有了新的container选项。如果将容器设置为“body”，则工具提示和弹出窗口将不会被剪切。这是一个工作小提琴 http://jsfiddle.net/snT9P/1/.

希望有帮助。