Tooltips and Popovers inside a Modal don't work

[HannesWaechter]

Thanks to @jonypawks:
Tooltips and popovers inside a modal are supposed to get a higher z-index than the modal itself. The CSS Selector
doesn't apply, since the tooltips and popovers themselves aren't in the .modal container, but only in the body.
For more details, see Comment 2 by @jonypawks.

Here is a Fiddle: http://jsfiddle.net/BqEzt/1/

Probably dropdowns in modals aren't working either.

[johnh1981]

I noticed the tooltips in a modal on my site weren't working either. Rolling back from 2.1.1 css file brings them back.

[jonypawks]

I think that tooltips on elements inside a modal are supposed to get a higher z-index which isn't happening:

// Recalculate z-index where appropriate,
// but only apply to elements within modal
.modal-open .modal {
  .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
  .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
  .popover       {  z-index: @zindexPopover  + @zindexModal; }
  .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
}

The tooltips themselves aren't actually in a .modal container since they just get appended to the bottom of the body.

[mandymozart]

agree with @jonypawks
...definitely a z-index offset

[andrewdeandrade]

Hey @HannesWaechter,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[HannesWaechter]

Hey @malandrew,

thanks for the hint, here is a Fiddle: http://jsfiddle.net/BqEzt/1/

now let's see if I'm able to update the issue, because it's not only in the documentation....

[demike]

That has been fixed in 2.1.2, commit @88b1e44dd61afd8f08761346555521bd216ed73a

[mdo]

Yup, resolved in 2.1.2-wip.

[mchiareli]

2.3.1 still has this bug.

[cvrebert]

@mchiareli: goes under the modal's header, but seems to work otherwise: http://jsfiddle.net/p6BAD/

[akshayakrsh]

2.3.2 has this bug as well, how to solve it? For now I have used z-index:1060 from css, but the popover positioning is not correct!

[kiev78]

this is still an issue for me in 3.1.1 version 👎

[cvrebert]

@kiev78 Works fine AFAICT: http://jsfiddle.net/32UEs/3/

[kiev78]

http://jsfiddle.net/32UEs/4/ - popover doesn't work

[jonypawks]

It's not working because you've assigned the container to be the body element. If you change the data-container attribute to be a selector for something inside the modal-body it will work just fine:

http://jsfiddle.net/32UEs/5/

[kiev78]

Thanks for clarifying @jonypawks - I completely missed that! It is not a bug 👍

[ssao-consultant]

The container attribute should be unique. Because my project have several modal instance and I tried using .modal-body and it does not enable popover, when I changed the container to some unique ID within modal dialog it does work. I thought this would be using parent element context, but may be it behaves differently.