twitter-bootstrap 从引导工具提示中删除透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35083413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove transparency from bootstrap tooltip
提问by ganjan
The standard .tooltip from twitter bootstrap has a transparency that I would like to remove.
来自 twitter bootstrap 的标准 .tooltip 有一个我想删除的透明度。
This my HTML:
这是我的 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:
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;
}
Also I made a JSFiddle to illustrate, here: https://jsfiddle.net/fiddlejan/xpwhknja/
我也做了一个 JSFiddle 来说明，这里：https://jsfiddle.net/fiddlejan/xpwhknja/
If you hover over the button you can see how the transparent tooltip text is also showing the text underneath.
如果您将鼠标悬停在按钮上，您可以看到透明工具提示文本也如何显示下方的文本。
I tried:
我试过：
opacity: 1.0;
filter: alpha(opacity=100);
But it does't seem to work...
但它似乎不起作用......
回答by Dhara
回答by galengodis
Bootstrap v4.0:
引导程序 v4.0：
.tooltip.show {
opacity: 1;
}
回答by Narek-T
Add to your .tooltipclass also opacity 1, but with flag important.
See updated Fiddle
添加到您的.tooltip班级也 opacity 1，但带有 flag important。查看更新的小提琴
And in your fiddle you connected bootstrap.min.cssdirectly in html. So in your website you can write
在你的小提琴中，你bootstrap.min.css直接在 html 中连接。所以在你的网站上你可以写
.tooltip.in {
opacity: 1;
filter:alpha(opacity=100);
}
without any !importantand it will work. But in fiddle it doesn't work because you didn't use for that css External Resources
没有任何!important，它会工作。但是在小提琴中它不起作用，因为您没有使用该 cssExternal Resources
Its because in your bootstrap.css you have
这是因为在你的 bootstrap.css 你有
.tooltip.in{filter:alpha(opacity=90);opacity:.9}
回答by Govind jha
Please use !important on opacity like-
请在不透明度上使用 !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);
}
回答by Steffi Keran Rani J
When I needed to reduce the transparency of the tooltip provided by ngbTooltipthis is what I added in my CSS file.
当我需要降低由此提供的工具提示的透明度时，ngbTooltip这是我在 CSS 文件中添加的内容。
Note: I was using Bootstrap v4
注意：我使用的是Bootstrap v4
::ng-deep .tooltip.show {
opacity: 1!important;
}
回答by sanjeev jha
Add this class :
添加这个类：
.tooltip.in {
opacity: 1 !important;
}
回答by Jamie Paterson
You will need to be specific as the exact call is two classes in one element
您需要具体，因为确切的调用是一个元素中的两个类
.tooltip.in{
opacity: 0.9;
}
in boostrap.min.css
在 boostrap.min.css 中
So just override with opacity of 1;
所以只需覆盖不透明度为 1;
Hope this helps, if not you will need !important or another parent element in front - but cant see your loading order on the page so not sure on precedence.
希望这会有所帮助，否则您将需要 !important 或前面的另一个父元素 - 但无法在页面上看到您的加载顺序，因此不确定优先级。
