Bootstrap popover clipped to extent of containing div

Question

I want a popover to be contained within a collapsible div: http://jsfiddle.net/nathan9/qgyS7/. However, the popover seems to be limited to the extent of the div. Is there a way to prevent the clipping?

<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

Using timer is always a risky business. I've used a variant of Mike Lucid that listens to the collapsible event, shown and hide.

Here is a working fiddle

The code is as follow:

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

If you want your collapsable to be visible on load, don't forget to add classes in and visible to your collapsable div.

Edit

Starting with Bootstrap 2.3, tooltips and popover have a new container option. If you set the container to 'body', your tooltips and popovers will won't be clipped. Here is a working fiddle.

Hope that helps.

Answer 2

adding .collapse.in {overflow:visible} seems to do the trick

http://jsfiddle.net/ZArX7/

EDIT: Above answer only worked in chrome

Here is a piece of jquery that delays adding the class.

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

This solution works

http://jsfiddle.net/fnP7y/