Bootstrap5 プロンプトボックス

Bootstrap5 ツールチップ

この記事では、Bootstrap5 のツールチップコンポーネントの使用方法について説明します。ツールチップは、ユーザーが要素にマウスを合わせたときに、その要素に関する追加情報を提供する小さなポップアップボックスを表示するために使用されます。

1. Bootstrap5 ツールチップ - クイックスタート

data 属性と JavaScript を使用してツールチップを作成する方法を紹介します。

HTML


<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="ツールチップの内容">
  ボタン
</button>

JavaScript


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

上記は、ボタンにマウスを合わせたときに上部にツールチップを表示する基本的な例です。

2. Bootstrap5 ツールチップ - オプション

ツールチップには、動作をカスタマイズするためのオプションがいくつかあります。

オプション	説明
`animation`	CSS のフェードイン/フェードアウトアニメーションを使用するかどうかを指定します (デフォルト: `true`)。
`delay`	ツールチップの表示と非表示を遅延させる時間をミリ秒単位で指定します。オブジェクトで指定する場合は、`show` と `hide` のプロパティでそれぞれ指定します (デフォルト: `0`)。
`html`	ツールチップの内容に HTML タグを使用できるかどうかを指定します (デフォルト: `false`)。
`placement`	ツールチップをトリガー要素に対してどこに配置するかを指定します。指定できる値は、`top`、`bottom`、`left`、`right`、`auto` です (デフォルト: `top`)。
`selector`	ツールチップをトリガーする要素を指定します。これは、特定の子要素だけにツールチップを適用する場合に役立ちます。
`template`	ツールチップの HTML 構造をカスタマイズします。
`title`	ツールチップの内容を指定します。
`trigger`	ツールチップの表示をトリガーするイベントを指定します。指定できる値は、`click`、`hover`、`focus`、`manual` です (デフォルト: `hover focus`)。

例：遅延と HTML を使用したツールチップ


<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>

3. Bootstrap5 ツールチップ - メソッド

ツールチップを JavaScript で制御するためのメソッドを紹介します。

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

例：ボタンクリックでツールチップを表示/非表示


<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>

4. Bootstrap5 ツールチップ - イベント

ツールチップには、表示状態の変化を検知するためのイベントが用意されています。

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

例：ツールチップの表示時にコンソールログを出力


<button type="button" class="btn btn-secondary" id="myTooltipBtn2" data-bs-toggle="tooltip" data-bs-placement="top" title="ツールチップの内容">
  ボタン
</button>
<script>
const myTooltipBtn2 = document.getElementById('myTooltipBtn2')

myTooltipBtn2.addEventListener('shown.bs.tooltip', () => {
  console.log('ツールチップが表示されました')
})
</script>

Bootstrap5 ツールチップに関するQ&A

Q1: ツールチップが表示されません。何が問題でしょうか？

A1: 考えられる原因は以下の通りです。

JavaScript が正しく読み込まれていないか、エラーが発生しています。ブラウザの開発者コンソールを確認してください。
data-bs-toggle="tooltip" が要素に設定されていません。
JavaScript でツールチップを初期化する際に、正しい要素が指定されていません。

Q2: ツールチップの位置を調整するにはどうすればよいですか？

A2: data-bs-placement 属性または placement オプションを使用して、ツールチップの位置を調整できます。指定できる値は、top、bottom、left、right、auto です。

Q3: 複数の要素に同じツールチップの内容を表示するにはどうすればよいですか？

A3: JavaScript を使用して、同じ内容のツールチップを複数の要素に適用できます。ループ処理を使用して、各要素にツールチップを初期化します。


const tooltipTriggerList = document.querySelectorAll('.my-tooltip-class')
tooltipTriggerList.forEach(element => {
  new bootstrap.Tooltip(element, {
    title: '共通のツールチップの内容'
  })
})