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 a

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

Answer 2

You can use this CSS to overwrite default setting

.tooltip.show {
    opacity: 1 !important;
} 

Answer 3

This depends on which version of bootstrap you're using, but the opacity will be set in the bootstrap.css file. (I'm looking at v2.0.1)

The only opacity setting I can see in the bootstrap.css file is on line 2963:

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

Thus, you can change the opacity value to whatever fits better.

As for floating below the navbar, this will be due to it's z-index relative to the navbar. The z-index of the popover is set on line 2857:

.modal-open .popover {
  z-index: 2060;
}

So you could change that to a z-index higher than is used for the static navbar.

Hope this helps.