bootstrap popover not showing on top of all elements

Question

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     lt div gt     this sits on top of the popover  this did not happen before cleaning up scripts        lt div gt     popover shows on top of this            lt div gt    popover shows on top of this                  link here with popover in it             lt  div gt        lt  div gt   lt  div gt    Anyone have any idea on why the behavior of the popover changed  or how I can fix it  Thanks

User · Answer

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.

User · Answer

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    lt div class  popover top-modal  role  tooltip  gt  lt div class  arrow  gt  lt  div gt  lt h3 class  popover-title  gt  lt  h3 gt  lt div class  popover-content  gt  lt  div gt  lt  div gt                Css    top-modal     z-index  99999

User · Answer

I was able to solve the problem by setting data-container  body  on the html element  HTML example     lt a href     data-toggle  tooltip  data-container  body  title  first tooltip  gt      hover over me  lt  a gt    JavaScript example      your element   tooltip   container   body        Discovered from this link  https   github com twitter bootstrap issues 5889

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is Working for me      popover  container   body

User · Answer

lt div class  testDiv  gt   lt a tabindex    -1  id  testPop  title  stuff  data-toggle  popover  data-trigger  focus  data-placement  bottom  data-container   testDiv  gt    lt i class  fa fa-info-circle  gt  lt  i gt   lt  a gt    lt  div gt    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   js      testPop   popover  container    testDiv

User · Answer

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        lt a href     data-toggle  tooltip  data-container  body  gt  Popover One  lt  a gt    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         lt a href     data-toggle  tooltip  data-container   modal-two  gt  Popover Two  lt  a gt

User · Answer

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

User · Answer

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

User · Answer

Problem solved with data-container  body  and z-index 1- gt   lt 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   gt Top lt  div gt  2- gt   ggpopover in   z-index  9999  important

[javascript] bootstrap popover not showing on top of all elements

Examples related to javascript

Examples related to html

Examples related to twitter-bootstrap

Examples related to popover