Bootstrap 5のツールチップは、ユーザーが要素にマウスを合わせたときに、その要素に関する追加情報を提供する小さなポップアップボックスです。以下は、ツールチップの主な特徴と使い方について詳しく説明します。
ツールチップの基本設定
ツールチップは、要素にマウスをホバーした際に表示され、簡単な説明や補足情報を提供します。以下のようにHTMLとJavaScriptを使用して設定できます。
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="ツールチップの内容">ボタン</button>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
カスタマイズオプション
ツールチップには、いくつかのカスタマイズオプションがあります：
- placement: ツールチップの表示位置を指定します。
top,bottom,left,right,autoのいずれかを指定できます。 - delay: ツールチップの表示と非表示を遅延させる時間をミリ秒単位で指定します。
- html: ツールチップの内容にHTMLタグを使用できるかどうかを指定します。
- animation: CSSのフェードイン/フェードアウトアニメーションを使用するかどうかを指定します。
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-delay='{"show": 1000, "hide": 1500}' data-bs-html="true" title="<strong>太字</strong>のツールチップ">ボタン</button>
メソッドとイベント
ツールチップをJavaScriptで制御するためのメソッドとイベントも提供されています：
- .show(): ツールチップを表示します。
- .hide(): ツールチップを非表示にします。
- .toggle(): ツールチップの表示状態を切り替えます。
- .enable(): ツールチップを有効にします。
- .disable(): ツールチップを無効にします。
- .dispose(): ツールチップインスタンスを破棄します。
イベントとしては、 show.bs.tooltip, shown.bs.tooltip, hide.bs.tooltip, hidden.bs.tooltip, inserted.bs.tooltip などがあります。
<button type="button" class="btn btn-secondary" id="myTooltipBtn" data-bs-toggle="tooltip" data-bs-placement="top" title="ツールチップの内容">ボタン</button>
<script>
const myTooltipBtn = document.getElementById('myTooltipBtn');
const tooltip = new bootstrap.Tooltip(myTooltipBtn);
myTooltipBtn.addEventListener('click', () => {
tooltip.toggle();
});
</script>
