display bootstrap popovers outside divs with overflow:hidden

问题

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

回答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

回答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

回答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;}

来源：https://stackoverflow.com/questions/18194705/display-bootstrap-popovers-outside-divs-with-overflowhidden

标签

css

twitter-bootstrap

popover