Twitter Bootstrap工具提示和popover不透明度和叠加

Question

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

我的网站上有一个自举式固定导航栏.该网站是白色的,导航栏是深蓝色.

当使用工具提示时,它覆盖在导航栏上并且略微不透明,我真的不关心它.使用弹出框时,它没有不透明度,但隐藏在顶部导航栏后面.

所以我想如果我想同时使用这两个问题,这是一个双重问题.如何取消工具提示的不透明度并使弹出窗口悬停在顶部栏上.选择使用两者都是理想的.

Answer 1

使用一些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);
}

对于Popover

在Web上,由于较低的z-index,一个对象被置于另一个对象之下.弹出窗口的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: ###;
}