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

pvabu6sv 于 2023-05-27 发布在 Bootstrap

关注(0)|答案(9)|浏览(279)

twitter bootstrap中的standard .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);

但好像不管用...

twitter-bootstrap

来源：https://stackoverflow.com/questions/35083413/remove-transparency-from-bootstrap-tooltip

9条答案

按热度按时间

bvhaajcl1#

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

赞(0）回复(0）举报 2023-05-27

fdbelqdn2#

Bootstrap v4.0：

.tooltip.show {
    opacity: 1;
}

赞(0）回复(0）举报 2023-05-27

b91juud33#

在.tooltip类中添加opacity 1，但带有标志important。参见更新的Fiddle
在你的fiddle中，你直接在html中连接了bootstrap.min.css。所以在你的网站上你可以写

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

没有任何!important，它将工作。但是在fiddle中它不起作用，因为你没有使用css External Resources
这是因为在你的bootstrap.css你有

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

赞(0）回复(0）举报 2023-05-27

zyfwsgd64#

请使用！对不透明性很重要-

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

赞(0）回复(0）举报 2023-05-27

im9ewurl5#

当我需要减少**ngbTooltip提供的工具提示的透明度时，我在CSS文件中添加了这个。
注意：我使用的是Bootstrap v4**

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

赞(0）回复(0）举报 2023-05-27

6yt4nkrj6#

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

$tooltip-opacity: 1;

赞(0）回复(0）举报 2023-05-27

f87krz0w7#

添加这个类：

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

赞(0）回复(0）举报 2023-05-27

ht4b089n8#

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

.tooltip.in{
opacity: 0.9;
}

在boostrap.min.css
所以只要覆盖不透明度为1;
希望这有帮助，如果不是你会需要的！important或另一个父元素在前面-但无法在页面上看到您的加载顺序，因此不确定优先级。

赞(0）回复(0）举报 2023-05-27

3phpmpom9#

试试这个：

.tooltip {
  opacity: 1 !important;
}

赞(0）回复(0）举报 2023-05-27

我来回答

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

9条答案

相关问题

热门标签

最新问答