Tips!Bootstrap3 tooltipの背景や枠線を変更する

Bootstrap3 tooltipを使うと黒地に白文字になるのですが、一部のtooltipだけデザインを変えたかったので挑戦してみました。

HTML

tooltipを表示したい要素に識別するclass(ここではred-tip)をつけます。

<button class="btn red-tip" data-toggle="tooltip" title="注目～">変更後</button>

CSS

CSS側でBootstrap3が設定している値を上書きしてしまいます。
この時に識別用のclassを指定しないと全体的に影響がでてしまうので注意。

.red-tip + .tooltip .tooltip-inner {
  background-color: #FFFFFF;
  border: 2px solid #E20F09;
  color: black;
}

.red-tip + .tooltip.top .tooltip-arrow {
  border-top-color: #E20F09;
}

↓デフォルトにカーソルをあてると、黒地に白のいつものtooltip。変更後にカーソルをあてると上のcssで上書きされたtooltipが表示されます。

See the Pen Bootstrap3 Tooltip 枠線や背景の変更 by hebisan (@climbFrog) on CodePen.

今回は怠けてやってないんですけど、topだけではなく他の位置を指定されても対応するように下記の記述も入れておいた方がいいです。
（未検証）

.red-tip + .tooltip.bottom .tooltip-arrow {
  border-top-color: #E20F09;
}
.red-tip + .tooltip.left .tooltip-arrow {
  border-top-color: #E20F09;
}
.red-tip + .tooltip.right .tooltip-arrow {
  border-top-color: #E20F09;
}

参考:Bootstrap3日本語リファレンス

(byへびさん）