从引导工具提示中删除透明度答案

【问题标题】：remove transparency from bootstrap tooltip从引导工具提示中删除透明度
【发布时间】：2016-05-07 02:56:54
【问题描述】：

来自 twitter bootstrap 的标准 .tooltip 具有我想删除的透明度。

这是我的 HTML：

<a href="#" class="btn
btn-info" 
style="margin:10px;" 
data-toggle="tooltip" 
data-placement="bottom" 
data-html="true"
title="MERKNAD 1 Denne klassifiseringen er i henhold til NS-EN 13501-2. <br /><br /> MERKNAD 2 Valgene 11-16 gjelder bærende konstruksjoner, valgene 21-24 gjelder kun integritet, valgene 31-37 gjelder både integritet og isolasjon, valgene 41-46 gjelder bærende skiller konstruksjoner med isolasjonskrav, og valgene 51-54 gjelder seksjoneringsvegger og dekker.">Hover</a>

CSS：

.tooltip > .tooltip-inner {
    border: 1px solid;
    padding: 10px;
    max-width: 450px;
    color: black;
    text-align: left;
    background-color: white;
    background: white;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.tooltip > .tooltip-arrow {
    border-bottom-color: black;
}

我还做了一个 JSFiddle 来说明，这里： https://jsfiddle.net/fiddlejan/xpwhknja/

如果您将鼠标悬停在按钮上，您可以看到透明的工具提示文本也在下方显示文本。

我试过了：

opacity: 1.0;
filter: alpha(opacity=100);

但是好像不行……

【问题讨论】：

@A.Wolff 在 Chrome 中是给我的
对我来说也在 Firefox 中。
@A.Wolff 这是一个非常轻微的透明度。如果你仔细看，你会看到它
哦，伙计们，你是对的。我目前正在笔记本电脑上测试它，眼睛有些阳光......我的错，对不起！

标签： jquery html css twitter-bootstrap twitter-bootstrap-tooltip

【解决方案1】：

在css中添加.tooltip.in{opacity:1!important;}..默认是0.9这就是为什么背景是透明的 jsfiddle

【讨论】：

【解决方案2】：

引导 v4.0：

.tooltip.show {
    opacity: 1;
}

【讨论】：

【解决方案3】：

添加到您的.tooltip 类也为不透明度1，但带有important 标志。查看更新的Fiddle

在您的小提琴中，您直接在 html 中连接了 bootstrap.min.css。所以在你的网站上你可以写

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

没有任何!important，它会工作。但是在小提琴中它不起作用，因为你没有使用那个 css External Resources

因为在你的 bootstrap.css 中你有

.tooltip.in{filter:alpha(opacity=90);opacity:.9}

【讨论】：

您应该使用任何更具体的规则，而不是使用!important 语句
当然你可以用父元素选择器而不是 !important 覆盖它
@A.Wolff，@ShaneQful，你是对的。但请注意，主题启动器在 JSFiddle 中直接放置了指向 <html> 的链接。如果正常连接这些样式，使用external resources 所以不需要'！important'。

【解决方案4】：

请在不透明度上使用 !important -

.tooltip > .tooltip-inner {
  border: 1px solid;
  padding: 10px;
  max-width: 450px;
  color: black;
  text-align: left;
  background-color: white;
  background: white;

  opacity: 1.0;
  filter: alpha(opacity=100);
} 

.tooltip > .tooltip-arrow { border-bottom-color:black; }

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

【讨论】：

【解决方案5】：

当我需要降低 ngbTooltip 提供的工具提示的透明度时，这是我在 CSS 文件中添加的内容。

注意：我使用的是 Bootstrap v4

::ng-deep .tooltip.show {
    opacity: 1!important;
}

【讨论】：

【解决方案6】：

如果您使用 SCSS 和 Bootstrap 4，您可以简单地覆盖 $tooltip-opacity 变量，如下所示：

$tooltip-opacity: 1;

【讨论】：

【解决方案7】：

添加这个类：

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

【讨论】：

【解决方案8】：

您需要具体说明，因为确切的调用是一个元素中的两个类

    .tooltip.in{
opacity: 0.9;
}

在 boostrap.min.css 中

所以只需覆盖不透明度为 1；

希望这会有所帮助，否则您将需要 !important 或前面的其他父元素 - 但无法在页面上看到您的加载顺序，因此不确定优先级。

【讨论】：

是的，body .tooltip.in{ opacity: 1; } 修复了它