web-dev-qa-db-ja.com

bootstrap tooltipから透明度を削除

Twitterの標準の.tooltip bootstrap=は、削除したい透明度を持っています。

この私の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);

しかし、うまくいかないようです...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-tooltip
16
ganjan

追加 .tooltip.in{opacity:1!important;} in css ..デフォルトでは、0.9それが背景が透明である理由 jsfiddle

21
Dhara

.tooltipクラスにも不透明度1を追加しますが、フラグはimportantです。更新済みを参照してください Fiddle

そして、フィドルでbootstrap.min.cssをHTMLで直接接続しました。だからあなたのウェブサイトで書くことができます

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

!importantなしで機能します。しかし、フィドルでは、CSS External Resourcesに使用しなかったため、機能しません。

あなたのbootstrap.cssにはあなたが持っているからです

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

ブートストラップv4.0：

.tooltip.show {
    opacity: 1;
}
7
galengodis

不透明度に！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);
}
2
Govind jha

ngbTooltipで提供されるツールチップの透明度を下げる必要があるとき、これがCSSファイルに追加されました。

注：私はBootstrap v4を使用していました

::ng-deep .tooltip.show {
    opacity: 1!important;
}
1
Steffi Keran Rani J

このクラスを追加します。

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

正確な呼び出しは1つの要素に2つのクラスがあるため、特定する必要があります。

    .tooltip.in{
opacity: 0.9;
}

boostrap.min.css内

したがって、不透明度1でオーバーライドします。

これが役立つ場合は、前に！importantまたは別の親要素が必要になりますが、ページ上の読み込み順序が表示されないため、優先順位がわかりません。

1
Jamie Paterson