Popper Bootstrap przycięty do zakresu zawierającego div

Question

Chcę popover być zawarte w składanym div: http://jsfiddle.net/nathan9/qgyS7/. Jednak popover wydaje się być ograniczony do zakresu div. Czy istnieje sposób, aby zapobiec obcinaniu?

<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

dodanie .collapse.in {overflow:visible} wydaje rade

http://jsfiddle.net/ZArX7/

EDIT: Powyżej odpowiedź pracował tylko w chromie

Oto kawałek jquery, które opóźnia dodanie klasy.

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

To rozwiązanie działa

http://jsfiddle.net/fnP7y/

Answer 2

Korzystanie czasomierz jest zawsze ryzykowne. Użyłem wariantu Mike Lucid, który słucha składanego wydarzenia, pokazanego i ukrytego.

Here is a working fiddle

Kod jest następująco:

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

Jeśli chcesz, aby składanego być widoczne na obciążenia, nie zapomnij dodać klas w i widocznym aby Twój składanego div.

Edit

Począwszy Bootstrap 2.3, podpowiedzi i popover mieć nową container opcję. Jeśli ustawisz kontener na "body", twoje podpowiedzi i popovers nie zostaną przycięte. Here is a working fiddle.

Nadzieję, że pomaga.