ブートストラップ ツールチップの色を変更するにはどうすればよいですか?

Bootstrap ツールチップの色を変更する方法

Bootstrap でツールチップの色を変更すると、Web サイトのデザインに合わせて外観をカスタマイズできます。これは、カスタム CSS スタイルを追加することで実現できます。

ツールヒントの色を変更するには、まずツールヒントを使用している要素に一意のクラスを割り当てます。例:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

次に、次の CSS ルールを追加します:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
}

これにより、ツールヒントの矢印と内部の背景が赤に変更されます。 #f00 を任意のカラー コードに置き換えて、ツールチップの色をカスタマイズできます。

Bootstrap 4 では、デフォルトの黒色を削除するには、特に下部の配置矢印をターゲットにする必要がある場合があります:

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}

さらに、Bootstrap 4 の場合は、ツールチップに次の CSS を使用します:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

以上がブートストラップ ツールチップの色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。