Bootstrap のツールチップ

Bootstrap ツールチップ

Bootstrap のツールチップ

この記事では、Bootstrap フレームワークのツールチップコンポーネントについて説明します。使用方法、カスタマイズオプション、JavaScript の動作、アクセシビリティに関する注意事項など、詳細を解説します。

---

一、クイックスタート

Bootstrap のツールチップは、HTML の data 属性または JavaScript を使用して簡単に実装できます。

1. data 属性を使用した初期化

要素に data-bs-toggle="tooltip" 属性を追加し、title 属性にツールチップのテキストを設定します。


<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

2. JavaScript を使用した初期化

JavaScript を使用してツールチップを初期化するには、要素を選択し、tooltip() メソッドを呼び出します。


<button type="button" class="btn btn-secondary" id="myTooltip">
  Tooltip on top
</button>

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

二、HTML 構造

ツールチップの基本的な HTML 構造は次のとおりです。


<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

button 要素は、ツールチップを表示するトリガー要素です。
data-bs-toggle="tooltip" 属性は、Bootstrap に対してツールチップを初期化するように指示します。
data-bs-placement="top" 属性は、ツールチップの位置を上に設定します。
title 属性は、ツールチップのテキストコンテンツを指定します。

アクセシビリティ

ツールチップのアクセシビリティを向上させるために、aria 属性を使用することが重要です。 aria-label 属性または aria-describedby 属性を使用して、ツールチップの目的を支援技術に伝えます。

三、無効化された要素のツールチップ

無効化された要素にツールチップを表示するには、トリガー要素をラップする要素にツールチップをアタッチし、pointer-events: none; スタイルをトリガー要素に適用します。


<span class="d-inline-block" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-secondary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

四、オプション

ツールチップは、data 属性または JavaScript のオプションを使用してカスタマイズできます。以下は、使用可能なオプションの表です。

オプション	説明	デフォルト値
`animation`	CSS のフェードイン/フェードアウトアニメーションを使用するかどうか。	`true`
`container`	ツールチップの親要素を指定します。位置決めするために使用されます。	`body`
`delay`	ツールチップの表示と非表示の遅延時間をミリ秒単位で設定します。	`0`
`html`	ツールチップのコンテンツに HTML を使用できるかどうか。	`false`
`placement`	トリガー要素に対するツールチップの位置を指定します。	`top`
`selector`	子要素にツールチップのトリガーイベントを委任します。	`null`
`template`	ツールチップの HTML 構造をカスタマイズします。	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`
`title`	ツールチップのコンテンツテキストを設定します。	`''`
`trigger`	ツールチップの表示をトリガーするイベントタイプを指定します。	`'hover focus'`
`offset`	トリガー要素に対するツールチップのオフセットを指定します。	`[0, 0]`
`fallbackPlacements`	デフォルトの位置にツールチップを表示できない場合の代替位置を指定します。	`['top', 'right', 'bottom', 'left']`
`boundary`	ツールチップの境界要素を設定します。境界要素を超えないようにします。	`'clippingParents'`
`customClass`	ツールチップにカスタム CSS クラスを追加します。	`''`
`sanitize`	ツールチップのコンテンツをサニタイズして XSS 攻撃を防ぐかどうか。	`true`
`sanitizeFn`	カスタムのサニタイズ関数を設定します。	`null`
`allowList`	ツールチップのコンテンツで許可される HTML タグと属性のホワイトリストを設定します。	`null`

五、メソッド

ツールチップを制御するために使用できる JavaScript メソッドを以下に示します。

メソッド	説明
`.tooltip(options)`	ツールチップインスタンスを初期化します。
`.show()`	ツールチップを表示します。
`.hide()`	ツールチップを非表示にします。
`.toggle()`	ツールチップの表示状態を切り替えます。
`.update()`	ツールチップの位置とコンテンツを更新します。
`.dispose()`	ツールチップインスタンスを破棄します。
`.enable()`	ツールチップを有効にします。
`.disable()`	ツールチップを無効にします。
`.toggleEnabled()`	ツールチップの有効/無効状態を切り替えます。

六、イベント

ツールチップに関連するイベントを以下に示します。

イベント	説明
`show.bs.tooltip`	ツールチップが表示される前にトリガーされます。
`shown.bs.tooltip`	ツールチップが表示された後にトリガーされます。
`hide.bs.tooltip`	ツールチップが非表示になる前にトリガーされます。
`hidden.bs.tooltip`	ツールチップが非表示になった後にトリガーされます。
`inserted.bs.tooltip`	ツールチップの HTML 構造が DOM ツリーに挿入された後にトリガーされます。

七、アクセシビリティ

ツールチップのアクセシビリティを向上させるために、次の点に注意してください。

aria 属性とロール属性を使用して、ツールチップの目的を支援技術に伝えます。
キーボードのフォーカスとキーボード操作をサポートします。
十分な色のコントラストを提供します。

---

まとめ

この記事では、Bootstrap フレームワークのツールチップコンポーネントについて、基本的な使用方法から高度なカスタマイズオプション、JavaScript の動作、アクセシビリティに関する注意事項まで、詳しく解説しました。これらの情報を活用して、ユーザーエクスペリエンスを向上させるツールチップを実装してください。