Reputation: 33701

bootstrap popover not showing on top of all elements

I'm working on a bootstrap site and after updating to bootstrap 2.2 from 2.0 everything worked except the popover.

The popovers still show up fine, but they don't show up on top of all other elements.

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

Anyone have any idea on why the behavior of the popover changed, or how I can fix it? Thanks.

Upvotes: 134

Answers (16)

ecalimac

Reputation: 9

Problem solved with data-container="body" and z-index:

<div class="button btn-align"
     data-container="body"  
     data-toggle="popover"
     data-placement="top"
     title="Top"
     data-trigger="hover"
     data-title-backcolor="#fff"
     data-content="A top aligned popover is a really boring thing in the real life."
>Top</div>

.ggpopover.in {
    z-index: 9999 !important;
}

Upvotes: 0

Zyo

Reputation: 2068

giving my 2 cents, My issue was NOT the container nor the z-index like other solution above, but the opacity set in a transition.

.popover{opacity:1}

solved my issue.

Upvotes: 1

SumitK

Reputation: 215

When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom container so that the popover’s HTML appears within that element instead.

For instance say the parent for a popover is body then you can use.

    <a href="#" data-toggle="tooltip" data-container="body"> Popover One </a>

Other case might be when popover is placed inside some other element and you want to show popover over that element, then you'll need to specify that element in data-container. ex: Suppose, we have popover inside a bootstrap modal with id as 'modal-two', then you'll need to set 'data-container' to 'modal-two'.

    <a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>

Upvotes: 0

Ajay

Reputation: 888

  $('[data-toggle="popover"]').popover({
        placement: 'top',
        boundary: 'viewport',
        trigger: 'hover',
        html: true,
        content: function () {
            let content = $(this).attr("data-popover-content");
            return $(content).html();
        }
    });,



`placement`: 'top',
`boundary`: 'viewport'
both needed

Upvotes: 2

Lucian Minea

Reputation: 1336

Many years later, but like me, others may search for this. All updates taking into consideration, all this can be solved with correct initialization options, in JavaScript.

$('.tip').tooltip({
    boundary: 'viewport',
    placement: 'top',
    container:'body',
    sanitize: true,
    appendToBody: true
});

Those settings solved all may issues. I had tooltips flickering, showing corectly only for half of the items on page, jumping from top to left continously, all kinds of wierdness. But with those settings everything is solved. Hope it help anyone looking.

Upvotes: 2

Kodin

Reputation: 812

<div class="testDiv">
<a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv">
 <i class="fa fa-info-circle"></i>
</a>

</div>

Above answers were helpful as setting value in data-container did the job but if i set data-container="body" then it doesn't align properly in my case. So i specified the class of the parent div of popover and it worked fine.

html

data-container=".testDiv"

$("#testPop").popover({container: '.testDiv'})

Upvotes: 6

mortenma71

Reputation: 1286

In my case I had to use the popover template option and add my own css class to the template html:

        $("[data-toggle='popover']").popover(
          {
            container: 'body',
            template: '<div class="popover top-modal" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
       });

Css:

.top-modal {
  z-index: 99999;
}

Upvotes: 0

Dmitriy Sintsov

Reputation: 4159

Just using

$().popover({container: 'body'})

could be not enough when displaying popover over a BootstrapDialog modal, which also uses body as container and has a higher z-index.

I come with this fix which uses internals of Bootstrap3 (may not work with 2.x / 4.x) but most of modern Bootstrap installations are 3.x.

self.$anchor.on('shown.bs.popover', function(ev) {
    var tipCSS = self.$anchor.data('tipCSS');
    if (tipCSS !== undefined) {
        self.$anchor.data('bs.popover').$tip.css(tipCSS);
    }
    // ...
});

Such way different popovers may have different z-index, some are under BootstrapDialog modal, while another ones are over it.

Upvotes: 0

Enkode

Reputation: 4783

This best solution if you are using angular uib-bootsrap is to Use dependency injection for $uibTooltipProvider, you can change the way tooltips and popovers behave by default for all the tooltips.

$uibTooltipProvider.options({
  appendToBody: true
});

$uibTooltipProvider Through the $uibTooltipProvider, you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:

setTriggers(obj) (Example: { 'openTrigger': 'closeTrigger' }) - Extends the default trigger mappings mentioned above with mappings of your own.

options(obj) - Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the C badge.

Upvotes: 2

Nalan Madheswaran

Reputation: 10562

If data-container="body" not works than try other two properties:

data-container="body" style="z-index:1000; position:relative"

z-index should be max limit.

Upvotes: 9

Saqib R.

Reputation: 3069

This is Working for me

$().popover({container: 'body'})

Upvotes: 46

Charl Kruger

Reputation: 160

I had a similar issue with 2 fixed elements - even though the z-index heirachy was correct, the bootstrap tooltip was hidden behind the one element wth a lower z-index.

Adding data-container="body" resolved the issue and now works as expected.

Upvotes: 12

Kyle

Reputation: 33701

I was able to solve the problem by setting data-container="body" on the html element

HTML example:

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript example:

$('your element').tooltip({ container: 'body' })

Discovered from this link: https://github.com/twitter/bootstrap/issues/5889

Upvotes: 373

Dologan

Reputation: 4774

I just had a situation that was similar to this, involving the DataTables JQuery library with scrolling enabled.

What turned out to be had nothing to do with Z-indices, but with one of the enclosing divs having the CSS overflow property set as hidden.

I fixed it by adding an event to my element triggering the popover which also changed the overflow property of the responsible div to visible.

Upvotes: 26

Sherbrow

Reputation: 17379

The most probable cause is that the content displaying over the popover has a higher z-index. Without the precise code/style, I can offer two options :

You should try pinpointing the exact elements with a web inspector (usually F12 on your favorite browser) and check their actual z-index.

If you find this value, you can set it lower than the popover which is z-index: 1010; by default

Or the other approach, not as good, would be to increase the z-index of the popover. You can do that either with the @zindexPopover in the Less files or directly by overriding

.popover {
    z-index: 1010; /* A value higher than 1010 that solves the problem */
}

If you can't find a solution, you should try reproducing the bug in something like this jsfiddle - you will probably resolve the problem while trying to get the bug.

Upvotes: 17

Scott Simpson

Reputation: 3850

It could have to do with the z-index master list on variables.less. In general, be sure that your variables.less file is correct and up-to-date.

Upvotes: -1

bootstrap popover not showing on top of all elements

Answers (16)

Related Questions