CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrappopover
Dominik
Dominik

Reputation: 1431

Bootstrap: popover on modals

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 ?

enter image description here

Upvotes: 9

Views: 23916

Answers (5)

Jorge Paiz
Jorge Paiz

Reputation: 516

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

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

Upvotes: 2

ksiomelo
ksiomelo

Reputation: 1908

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

.popover {
    z-index: 1060;
}

Upvotes: 8

JVitela
JVitela

Reputation: 2512

In the meanwhile you can try:

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

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

Upvotes: 6

Dominik
Dominik

Reputation: 1431

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

Upvotes: 9

Elzo Valugi
Elzo Valugi

Reputation: 27876

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.

Upvotes: 1

Related Questions