I am designing a page using Bootstrap 3. I am trying to use a popover with placement: right on an input element. The new Bootstrap ensures that if you use
container: 'body' normally does the trick (see JustAnil's answer above), but there's a problem if your popover is in a modal. The z-index places it behind the modal when the popover's attached to body. This seems to be related to BS2 issue 5014, but I'm getting it on 3.1.1. You're not meant to use a container of body, but if you fix the code to
$('#fubar').popover({
trigger : 'hover',
html : true,
dataContainer : '.modal-body',
...etc });
then you fix the z-index problem, but the popover width is still wrong.
The only fix I can find is to use container: 'body' and to add some extra css:
.popover {
max-width : 400px;
z-index : 1060;
}
Note that css solutions by themselves won't work.