Popover Gets Hidden Under The Nav Bar in Twitter Bootstrap

Popover gets hidden under the nav bar in Twitter Bootstrap

First, the answer to your question is that popovers are not intended to be used in a fixed navbar. In the variables.less, you will find the following list of z-indexes:

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1030;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

As you can see, Popovers are intended to slip beneath the fixed navbar. However, you will notice that Tooltips will not, and you can also use trigger: 'click' on tooltips.

Otherwise, if you are deadset on the popover, you are going to have to manually change it's z-index. The following will activate it and permanently change it's z-index, so you don't have to worry about doing it every time it shows, or anything like that:

$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index', 1030);

JSFiddle

Second, just an explanation as to why my example seemed to work, whereas yours didn't.

The significant point of difference between our two examples (mmfansler JSFiddle and houmie JSFiddle) was actually not a difference between 2.1.0 and 2.1.1. Both of them have z-index: 1030 for fixed navbars and z-index: 1010 for popovers (which is what your complaining about).

The real point of difference is that my 2.1.0 example is also loading the responsive code. For some reason BootstrapCDN changed the naming convention:

bootstrap.min.css in 2.1.0 was a combined version
bootstrap.min.css in 2.1.1 in the non-responsive only

I suspect this is a mistake, since as of me writing this bootstrap-combined.min.css is also non-responsive only!

Anyway, the only difference between the two which affects the popover display is:

.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

This rule however, only holds for certain media queries (which of course in JSFiddle gets activated since the viewport of the render is small).

Otherwise, when the navbar isn't static, you will continue to see the popovers beneath the navbar.

You might want to keep an eye on the BootstrapCDN Issue #41

How to show popover that is hiding behind navbar

I had a similar problem where the popover was hidden behind overflow content and adding the following attribute fixed it:

popover-append-to-body="true"

Adding popover to navbar dropdown item

Please use the following code to display popover on Dropdown menus, and here is the working fiddle

HTML

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li id="ex1"><a href="#">Example 1</a></li>
          <li id="ex2"><a href="#">Example 2</a></li>
          <li id="ex3"><a href="#">Example 3</a></li>
          <li id="ex5"><a href="#">Example 4</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

jquery

$(function () {
                var showPopover = function () {
                    $(this).popover('show');
                }
                , hidePopover = function () {
                    $(this).popover('hide');
                };
        $('#ex1').popover({
                    content: 'An Example1 popover',
                    trigger: 'hover',
                    placement:'top'
                })
        $('#ex2').popover({
                    content: 'An Example2 popover',
                    trigger: 'hover',
                    placement:'top'
                }) 

        $('#ex3').popover({
                    content: 'An Example3 popover',
                    trigger: 'hover',
                    placement:'top'
                })         

});

Twitter-bootstrap popover does not allow content below to function

Here is one option:

$('#popoverBtn1').popover({
    html: true,
    title: '<a class="close popoverThis">×</a>',
    content: $('#popoverContent1').html(),
});
$(document).on('click','.close',function (e) {
    $(this).closest('.popover').css('z-index','-1');
    $(this).closest('.popover').prev('button').popover('hide');
});
$('button.popoverThis').on('show.bs.popover', function () {
  $(this).next('.popover').css('z-index','100');
});

Example:

http://www.bootply.com/106588

Update

use this instead:

$(document).on('click','.close',function (e) {
    $(this).closest('.popover').hide();
    $(this).closest('.popover').prev('button').popover('hide');
});

http://www.bootply.com/106678

Boostrap's popover only displaying title and stops working after first toggle

It is because you're using data-bs-popover and data-bs-content on the button and that is Bootstrap 5 formatting.

You are calling Bootstrap 4 with

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3...........</script>

Use data-popover and data-content for Bootstrap 4.

Twitter Bootstrap: Hide other popovers when one is open

I've been having a play about with this and there's a few other problems regarding triggering the manual show/hide to get this to play nicely. Hover is actually mousein and mouseout and unless you add in some additional checks, you will come across the problems that I just did!

Here is my solution in action and I'll try to explain what I've done.

$(function () {

    var overPopup = false;

    $('[rel=popover]').popover({
        trigger: 'manual',
        placement: 'bottom'

    // replacing hover with mouseover and mouseout
    }).mouseover(function (e) {
        // when hovering over an element which has a popover, hide
        // them all except the current one being hovered upon
        $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
        var $popover = $(this);
        $popover.popover('show');

        // set a flag when you move from button to popover
        // dirty but only way I could think of to prevent
        // closing the popover when you are navigate across
        // the white space between the two
        $popover.data('popover').tip().mouseenter(function () {
            overPopup = true;
        }).mouseleave(function () {
            overPopup = false;
            $popover.popover('hide');
        });

    }).mouseout(function (e) {
        // on mouse out of button, close the related popover
        // in 200 milliseconds if you're not hovering over the popover
        var $popover = $(this);
        setTimeout(function () {
            if (!overPopup) {
                $popover.popover('hide');
            }
        }, 200);
    });
});

This worked perfectly for me with the following html:

<a href="#" id="example1" class="btn large primary" rel="popover" data-content="Example 1!!!" data-original-title="Example 1 title">Button 1</a>
<a href="#" id="example2" class="btn large primary" rel="popover" data-content="Example 2!!!" data-original-title="Example 2 title">Button 2</a>
<a href="#" id="example3" class="btn large primary" rel="popover" data-content="Example 3!!!" data-original-title="Example 3 title">Button 3</a>

Hope that sorts you out :)

bootstrap popover not showing on top of all elements

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

Twitter Bootstrap tooltip and popover opacity and overlay

Both of these changes can be solved using a bit of CSS. I recommend that you do not directly modify the Twitter Bootstrap CSS, but instead link to a different stylesheet. Make sure to include this new stylesheet after including the Bootstrap stylesheet so that it overrides the Bootstrap CSS. At the time of writing, the most recent version of Bootstrap is 2.1.1, so all comments are based off of that assumption.

For Tooltip

The effect of the tooltip is defined in the .tooltip.in rule on line 5003 as follows:

.tooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

To remove the effect, insert in your new stylesheet the following:

.tooltip.in {
  opacity: 1;
  filter: alpha(opacity=100);
}

For Popover

On the web, one object is placed under another due to a lower z-index. The z-index of popover is defined in line 5080 as follows:

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  ...
}

In this version of Bootstrap, however, the default (static) navbar, does not have an explicit z-index set, so it defaults to 0. Since that is the case, the popover should already be over the navbar. If you are using an older version of Bootstrap, you can fix this by finding the z-index of the navbar and setting the z-index of the popover to a higher number. You can do that by adding the following code to the new stylesheet:

.popover {
  z-index: ###;
}

Popover Gets Hidden Under The Nav Bar in Twitter Bootstrap