Bootstrap: popover on modals

Question

I want to use the popover effect on an existing modals dialog using the Bootstrap CSS Library from Twitter. I bind the popover to the small image icon.

$('#infoIcon').popover({
    offset: 50,
    placement: 'right'
});

The modals itself is also added according the documentation:

$('#modalContainer').modal({
    keyboard : true
});

But the effect I've got is, that the popover is rendered UNDER the modal container instead OVER the modal div (see the screenshot below). How can I bring the popover truly OVER the modal div ?

Answer 1

The guys at Bootstrap identifies this issue as a bug and fixed it for the next release. see more details here

Answer 2

You don't need javascript for that, simply set the z-index of the popover via CSS:

.popover {
    z-index: 1060;
}