Question

来自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);

但它似乎没有用......

Answer 1

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

Answer 2

在.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}

Answer 3

Bootstrap v4.0：

.tooltip.show {
    opacity: 1;
}

Answer 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);
}

Answer 5

添加此课程：

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

Answer 6

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

    .tooltip.in{
opacity: 0.9;
}

在boostrap.min.css

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

希望这会有所帮助，如果不是你需要！前面的重要或其他父元素 - 但是无法在页面上看到你的加载顺序，所以不确定优先顺序。

Answer 7

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

$tooltip-opacity: 1;

Answer 8

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

注意：我正在使用 Bootstrap v4

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

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

8 个答案: