ツールチップ（Tooltips） v5.0.0設定変更

概要（Overview）

ツールチップ・プラグインを使用するときに知っておくべきこと：

• ツールチップは、サードパーティのライブラリであるPopperを利用して位置情報を取得している。ツールチップが動作するためには、bootstrap.min.js の前にpopper.min.jsを組み込むか、Popperを中に組み込んでいる bootstrap.bundle.min.js を使用する必要がある。
• ツールチップは、パフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある（そのため実行コードが必要）。
• title の長さがゼロのツールチップは表示されない。
• container: 'body' を指定すると、より複雑なコンポーネント（インプットグループやボタングループなど）のレンダリングの問題が回避できる。
• 非表示要素のツールチップは機能しない。
• .disabled や disabled 要素のツールチップは、それを囲む要素で起動する必要がある。サンプル
• 複数行にまたがるハイパーリンクから起動されると、ツールチップは中央に配置されるので、この動作を回避するには、<a> に .text-nowrap をご使用下さい。
• ツールチップは、対応する要素がDOMから削除される前に非表示にする必要がある。
• ツールチップは、シャドウDOM内の要素のために起動できる。

実例（Examples）v5.2.0デザイン変更

ツールチップを有効にする（Enable tooltips）v5.2.0設定変更

前記のように、ツールチップを使用する前に初期化する必要がある。ページ上のすべてのツールチップを初期化する1つの方法は、次のように data-bs-toggle 属性で選択：

Bootstrap5.2.0の実行コード例 緑背景が5.2.0での変更箇所

JavaScriptconst tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

※Bootstrap5.1.3の実行コード例 赤背景が5.2.0での変更箇所

JavaScriptvar tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

※Bootstrap4.xの実行コード例

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

リンク上のツールチップ（Tooltips on links）v5.0.0-beta1設定変更

ツールチップを表示するには、以下のリンクにカーソルを合わせること：

見本

Bootstrap5.xの設定例 緑背景が変更箇所

HTML<p class="muted">ツールチップを使用した<a href="#" data-bs-toggle="tooltip" title="デフォルトのツールチップ">横並びリンク</a>を示すプレースホルダテキスト。これは今では単なるつなぎであり、大層なものではない。<a href="#" data-bs-toggle="tooltip" title="もう一つのツールチップ">実際のテキスト</a>の存在を模倣するためだけにここに配置されたコンテンツである。そして、これらすべては、実際の状況で使用したときにツールチップがどのように見えるかを示すためのもの。従って、<a href="#" data-bs-toggle="tooltip" title="ここにももう1つ">リンク上のこれらのツールチップ</a>を自分のサイトやプロジェクトで使用すると、実際に<a href="#" data-bs-toggle="tooltip" title="最後のツールチップ!">どのように機能</a>するか理解できると思う。</p>

カスタムツールチップ（Custom tooltips）v5.2.0新設

CSS変数を使用して、ツールチップの外観をカスタマイズできる。data-bs-custom-class="custom-tooltip" を使用してカスタムクラスを設定し、カスタムの外観を調査し、それを使用してローカルのCSS変数を再定義。

ツールチップの外観をPrimaryにする例

見本

設定例

CSS.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

HTML<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" title="このツールチップは、CSS変数をテーマにしている。">
  カスタムツールチップ
</button>

ツールチップの方向設定（Directions）v5.0.0-beta1設定変更

1.上、右、下、左の方向にツールチップを表示

下のボタンにカーソルを合わせると、上、右、下、左の4つのツールチップの指示が表示。RTL（右書き）でBootstrapを使用すると、方向が反転する。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

上に出るツールチップ<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="top" title="上に出るツールチップ">ツールチップ(上)</button>

右に出るツールチップ<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="right" title="右に出るツールチップ">ツールチップ(右)</button>

下に出るツールチップ<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="下に出るツールチップ">ツールチップ(下)</button>

左に出るツールチップ<button type="button" class="btn btn-secondary mb-2 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="left" title="左に出るツールチップ">ツールチップ(左)</button>

2. HTML付きツールチップ

カスタムHTMLを追加：

見本

設定例

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<b>HTML</b><u>付き</u><em>ツールチップ</em>">
  HTML付きツールチップ
</button>

3. SVGでのツールチップ v5.0.0-alpha2新設

見本

設定例

<a href="#" class="d-inline-block" data-bs-toggle="tooltip" title="通常のツールチップ">
  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
    <rect width="100%" height="100%" fill="#563d7c"/>
    <circle cx="50" cy="50" r="30" fill="#007bff"/>
  </svg>
</a>

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0新設

Bootstrapの進化するCSS変数アプローチの一環として、ツールチップは、リアルタイムのカスタマイズを強化するために、.tooltip でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_tooltip.scss 内 tooltip-css-vars の設定--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 tooltip-variables の設定$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     var(--#{$prefix}body-bg);
$tooltip-bg:                        var(--#{$prefix}emphasis-color);
$tooltip-border-radius:             var(--#{$prefix}border-radius);
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    null; // v6でのTODO: これを削除

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Bootstrap5.2.0では非推奨のCSS変数
// fusv-enable

使用方法（Usage）v5.2.0設定変更

ツールチッププラグインは、必要に応じてコンテンツとマークアップを生成し、デフォルトでは起動要素の後にツールチップを置く。ツールチップの起動はJavaScriptで行う：

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

※Bootstrap4.xの設定例

JavaScript$('#example').tooltip(options)

JavaScriptconst tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // または document.querySelector('#boundary')
})

マークアップ（Markup）

ツールチップに必要なマークアップは、ツールチップを表示したいHTML要素に data 属性と title をつけるだけ。生成されるツールチップのマークアップはかなりシンプルだが、表示される位置の設定が必要（デフォルトでは、プラグインによって top に設定）。

<!--HTMLコードの記載 -->
<a href="#" data-bs-toggle="tooltip" title="いくつかのツールチップテキスト！">この上にマウスポインタを移動</a>

<!-- プラグインによる一般的なマークアップ -->
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    いくつかのツールチップテキスト！
  </div>
</div>

無効な要素（Disabled elements）v5.0.0-beta2設定変更

disabled 属性を持つ要素はインタラクティブではないため、ユーザーがフォーカス、ホバー、クリックしてツールチップ（またはポップオーバー）を起動できない。回避策として tabindex="0" を使用して理想的にキーボードフォーカスを可能にしたラッピング要素の <div> や <span> からツールチップを起動する必要がある。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="無効ボタンのツールチップ">
<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
</span>

※Bootstrap4.xの設定例 赤背景が変更箇所

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="無効ボタンのツールチップ">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>無効ボタン</button>
</span>

オプション（Options）v5.0.0-beta1オプション追加、v5.0.0-beta2一部変更

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）にご変更下さい。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

popperConfig でfunctionを使用 v5.0.0-beta2追加

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // 必要に応じてdefaultBsPopperConfigを使用...
    // newPopperConfigを返す
  }
})

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // 必要に応じてdefaultBsPopperConfigを使用...
    // newPopperConfigを返す
  }
})

メソッド（Methods）v5.0.0-alpha1設定変更、v5.0.2メソッド追加

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScript// getOrCreateInstanceの実例
const tooltip = bootstrap.Tooltip.getInstance('#example') // Bootstrapツールチップインスタンスを返す

// setContentの実例
tooltip.setContent({ '.tooltip-inner': '別のタイトル' })

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScript// getOrCreateInstanceの実例
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl)

// setContentの実例
tooltip.setContent({ '.tooltip-inner': '別のタイトル' })

イベント（Events）

使用例 v5.2.0設定変更

JavaScriptconst myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // 何かをする...
})

tooltip.hide()