display bootstrap popovers outside divs with overflow:hidden

Question

I've got a question about how to get a bootstrap popover to show above (outside) a slider, which has a wrapper of overflow:hidden, that I can't seem to get around.

I'm using this slider: http://owlgraphic.com/owlcarousel/ I'm also using Twitter bootstrap 2.3.2 popovers: http://getbootstrap.com/2.3.2/javascript.html#popovers

both work well together with the exception of the overflow:hidden on the carousel, which is similar to issues like this: Popovers in Bootstrap 2.2.1 https://github.com/twbs/bootstrap/issues/6122

My question specifically is: Has anyone gotten this to work? I've done some moves with height and negative margin to get the vertical height showing, but if the popover is at the edge of my wrapping dive, it will get cut off at the edge. please let me know if I need to provide any additional detail.

Thanks Steph

Answer 1

Ok, so I figured this one out.

I changed:

$('.popover-with-html').popover({ html : true, });

to:

$('.popover-with-html').popover({ html : true, container: 'body'}); 

and it's working.

container: 'body'

was the key, I hope this helps someone.

Thanks

Steph

Answer 2

Add following in your CSS. Override overflow property of slider.

.carousel-inner{
    overflow:visible;
 }

I hope this helps someone.

Got it from https://github.com/twbs/bootstrap/issues/6091

Answer 3

I resolved it by overwriting carousel-inner in my own css. Increase height to show the drop down

.carousel-inner {height: 350px; width: 100%; min-width: 650px;}