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 ?

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 ?

• javascript
• jquery
• css
• twitter-bootstrap
• popover

5 Answers 5

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

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

.popover {
    z-index: 1060;
}

In the meanwhile you can try:

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

$("#infoIcon").data('popover').tip().css("z-index", 1060);

if you need to work on fly, you should be use

$("<style type='text/css'> .popover{z-index:1060;} </style>").appendTo("head");

Try to check what is the z-index value of one window and modify the z-index for the another one with a superior value. You can do this with jQuery css function if the plugins that you are using do not allow this change in their input parameters.