ブートストラップ ツールチップの色をカスタマイズするにはどうすればよいですか?

Bootstrap ツールチップの色のカスタマイズ

デフォルトでは、Bootstrap のツールチップは単色で表示されます。ただし、複数の色のバリエーションが必要な場合もあります。このカスタマイズを実現するための包括的なガイドは次のとおりです:

CSS の使用

ツールチップの色を変更するには、ツールチップをトリガーする要素にカスタム クラスを追加します:

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

CSS で、カスタムのスタイルを定義します。 class:

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

これにより、red-tooltip クラスを持つ要素のツールチップの色が赤に変更されます。

特定のツールチップ配置をターゲットにする

ツールチップの配置に基づいて色のカスタマイズが必要な場合は、以下:

4 より前のブートストラップ バージョンの場合

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

これは、上部に配置されたツールチップを対象とし、ツールチップの矢印に赤色を適用します。

Bootstrap 4 および上

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

このコードは、下部に配置されるツールヒントの色を指定します。 x-placement 属性のプレースメントを変更して、他のプレースメントをターゲットにすることができます。

追加のリソースとデモ

上記の方法を試すには、この にアクセスしてください。 jsFiddle:
[fiddle link]

次の手順に従って、デザイン要件に合わせてツールチップの色をカスタマイズしました。

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