【応用編】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、変数指定
