divを含む範囲にクリップストラップポップオーバー

Question

折りたたみ可能div内に含まれるポップオーバーを希望します。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> 

Answer 1

.collapse.in {overflow:visible}を追加するトリック

http://jsfiddle.net/ZArX7/

EDITあるようです：答えの上にのみここではクロム

で働いていたの作品ですjqueryクラスの追加を遅らせる。

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

このソリューションでは、タイマーを使用すると、常に危険なビジネスである

http://jsfiddle.net/fnP7y/

Answer 2

動作します。私はMike Lucidの変種を使用しました。この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。

編集

ブートストラップ2.3以降では、ツールチップとポップオーバーは、新しいcontainerオプションがあります。コンテナを「ボディ」に設定すると、ツールチップとポップオーバーは切り取られません。 Here is a working fiddle。

希望に役立ちます。