Twitter Bootstrap tooltip and popover opacity and overlay

Question

I am trying to decide on tooltip or popover .. or use both based on need. Here is the issue.

I have a bootstrap top stationary navbar on my site. The site is white and the navbar is dark blue.

When using the tooltip it overlays over the navbar and has a slight opacity to it which I really don't care for. When using the popover it has no opacity but hides behind the top navbar.

So I guess this is a dual question if I want to use both. How do I take off the opacity of the tooltip and make the popover hover over the topbar. Having the option of using both would ideal.

Answer 1

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: ###;
}