13

我正在尝试决定工具提示或弹出框..或根据需要使用两者。这是问题所在。

我的网站上有一个引导式顶部固定导航栏。该站点是白色的，导航栏是深蓝色的。

使用工具提示时，它会覆盖在导航栏上，并且有点不透明，我真的不在乎。使用弹出框时，它没有不透明度，但隐藏在顶部导航栏后面。

因此，如果我想同时使用两者，我想这是一个双重问题。如何取消工具提示的不透明度并使弹出框悬停在顶部栏上。可以选择同时使用两者是理想的。

4

3 回答 3

34

这两个变化都可以使用一点 CSS 来解决。我建议您不要直接修改 Twitter Bootstrap CSS，而是链接到不同的样式表。确保在包含 Bootstrap 样式表之后包含这个新样式表，以便它覆盖 Bootstrap CSS。在撰写本文时，Bootstrap 的最新版本是 2.1.1，因此所有评论都基于该假设。

对于工具提示

工具提示的效果在第 5003 行的 .tooltip.in 规则中定义如下：

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

要删除效果，请在新样式表中插入以下内容：

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

对于弹出框

在 Web 上，由于 z-index 较低，一个对象被放置在另一个对象之下。popover的z-index在5080行定义如下：

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

然而，在这个版本的 Bootstrap 中，默认（静态）导航栏没有明确的 z-index 设置，所以它默认为 0。既然是这种情况，弹出框应该已经在导航栏上方。如果您使用的是旧版本的 Bootstrap，您可以通过查找导航栏的 z-index 并将弹出框的 z-index 设置为更高的数字来解决此问题。您可以通过将以下代码添加到新样式表中来做到这一点：

.popover {
  z-index: ###;
}
于 2012-10-22T22:13:49.707 回答
2

这取决于您使用的引导程序版本，但不透明度将在bootstrap.css文件中设置。（我在看v2.0.1）

我可以在bootstrap.css文件中看到的唯一不透明度设置在第 2963 行：

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

因此，您可以将不透明度值更改为更适合的值。

至于在导航栏下方浮动，这将是由于它z-index相对于导航栏。弹出框的z-index2857 行设置：

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

因此，您可以将其更改为z-index高于用于静态导航栏的值。

希望这可以帮助。

于 2012-10-22T21:48:51.500 回答
0

您可以使用此 CSS 覆盖默认设置

.tooltip.show {
    opacity: 1 !important;
}
于 2020-12-30T15:30:36.720 回答