ブートストラップ ツールチップの色をカスタマイズして複数の色のオプションを持たせるにはどうすればよいですか?

<h2>ブートストラップ ツールチップの色のカスタマイズ</h2>

デザインの好みに合わせてブートストラップ ツールチップの色を変更したいと考えています。ただし、単にデフォルトの色を置き換えるのではなく、複数の色のオプションを柔軟に使用できることが必要です。

これを実現するには、次のアプローチを採用できます。

<h3>色のカスタマイズ< /h3>

1. ツールチップをトリガーする要素に一意のクラス名を割り当てます。 "red-tooltip."
2. 目的のツールチップの色を指定するカスタム クラスの CSS ルールを定義します:

.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
  /* Red color */
}

黒い矢印の保持 (5 より前のブートストラップ バージョン)

Bootstrap の以前のバージョンでは、ツールヒントの矢印が黒く表示される場合があります。これに対処するには:

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

Bootstrap 4 で色のカスタマイズ

Bootstrap 4 の場合は、次の CSS ルールを使用します:

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

完全なスニペット (Bootstrap 4)

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  /* Custom settings for your main tooltip element */
}

.tooltip-qm {
  /* Custom settings for the question mark icon inside the main tooltip element */
}

.tooltip-inner {
  /* Custom settings for the tooltip content */
}

.tooltip.show {
  /* Custom settings for the visible tooltip */
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red color */
  }
</style>

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