0 0

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
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %