Search code examples
jquerycsstwitter-bootstrappopover

Bootstrap Popover Not on Top

I'm building a page using Boostrap and Bootstrap Tiles. I'm trying to use Boostrap's Popover to show event data on a mini calendar. The problem is that the popover is hidden under the adjacent tile.

Popover error

I know z-index is relative to the parent and sibling elements but is there a way to configure the popover to be in front of all elements?

FIDDLE

Solution

  • Try setting the container to the body, like so:

    $('[data-toggle="popover"]').popover({container: 'body'});

    That makes the popovers parent the <body> element. So if still needed, you can adjust the z-index from there.

    HTH, -Ted