Menu
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
750
Set the trigger option of the popover to hover instead of click, which is the default one. Or with an initialization option: $("#popover"). popover({ trigger: "hover" });
To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.
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
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With