twitter-bootstrap Twitter Bootstrap 工具提示和弹出框不透明度和覆盖
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13020310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap tooltip and popover opacity and overlay
提问by SpaceMonkey
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.
使用工具提示时，它会覆盖在导航栏上，并有轻微的不透明度，我真的不关心。使用 popover 时，它没有不透明度，但隐藏在顶部导航栏后面。
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.
所以我想这是一个双重问题，如果我想同时使用两者。如何取消工具提示的不透明度并使弹出框悬停在顶栏上。可以选择同时使用两者是理想的。
回答by zongweil
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.
这两个变化都可以使用一点 CSS 来解决。我建议您不要直接修改 Twitter Bootstrap CSS，而是链接到不同的样式表。确保在包含 Bootstrap 样式表之后包含这个新样式表，以便它覆盖 Bootstrap CSS。在撰写本文时，Bootstrap 的最新版本是 2.1.1，因此所有评论都基于该假设。
For Tooltip
对于工具提示
The effect of the tooltip is defined in the .tooltip.in rule on line 5003 as follows:
工具提示的效果在第 5003 行的 .tooltip.in 规则中定义如下：
.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:
在网络上，由于较低的 z-index，一个对象被放置在另一个对象下。popover 的 z-index 在第 5080 行定义如下：
.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:
然而，在这个版本的 Bootstrap 中，默认（静态）导航栏没有明确的 z-index 设置，所以它默认为 0。既然是这样，弹出窗口应该已经在导航栏上。如果您使用的是旧版本的 Bootstrap，您可以通过查找导航栏的 z-index 并将弹出框的 z-index 设置为更高的数字来解决此问题。您可以通过将以下代码添加到新样式表来做到这一点：
.popover {
z-index: ###;
}
回答by nickhar
This depends on which version of bootstrap you're using, but the opacity will be set in the bootstrap.cssfile. (I'm looking at v2.0.1)
这取决于您使用的是哪个版本的引导程序，但不透明度将在bootstrap.css文件中设置。（我在看 v2.0.1）
The only opacity setting I can see in the bootstrap.cssfile is on line 2963:
我可以在bootstrap.css文件中看到的唯一不透明度设置在第 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-indexrelative to the navbar. The z-indexof the popover is set on line 2857:
至于浮动在导航栏下方，这是由于它z-index相对于导航栏。在z-index该酥料饼的设置上线2857：
.modal-open .popover {
z-index: 2060;
}
So you could change that to a z-indexhigher than is used for the static navbar.
因此，您可以将其更改为z-index高于用于静态导航栏的值。
Hope this helps.
希望这可以帮助。
