The Acorn Spirit's Journey

tomisan.com

【応用編】bootstrap Tooltipsカスタマイズ

【応用編】bootstrap Tooltipsカスタマイズ

bootstrap4のTooltipsをカスタマイズ。
https://getbootstrap.com/docs/4.3/components/tooltips/
JavaScriptでtemplate設定

Options
https://getbootstrap.com/docs/4.3/components/tooltips/#options
データ属性の場合はdata-のようにオプション名を追加。例「data-animation=”” 」

$(function () {
  $('[data-toggle="tooltip custom-tooltip"]').tooltip({
    template: '<div class="tooltip custom" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
    title: 'ツールチップの色変更'
  });
})
<a href="#" class="btn btn-outline-warning" data-toggle="tooltip custom-tooltip">ツールチップのカスタマイズ</a>
.custom {
  &.bs-tooltip-top .arrow::before,
  &.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: $white;
  }
  .tooltip-inner {
    background-color: $white;
    color: $gray-700;
  }
}

※scss、変数指定

tooltip

コメントは受け付けていません。