Bootstrap5 ツールチップ
ツールチップは小さなポップアップで、マウスが要素の上に移動すると表示され、マウスが要素の外に移動すると消えます。
ツールチップの作成方法
要素に追加することでdata-bs-toggle="tooltip"ツールチップを作成します。
title属性の内容はツールチップに表示される内容です：
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="私はツールチップの内容です!">マウスをここに移動してください</button>
注意:ツールチップは JavaScript の初期化コードに記述する必要があります: そして、指定した要素上で呼び出しますtooltip()メソッド。
以下の例では、ドキュメントのどこでもツールチップを使用できます：
例
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
試してみる »
ツールチップの位置を指定する
デフォルトでは、ツールチップは要素の上に表示されます。
使用できますdata-bs-placement属性でツールチップの表示方向を設定します: top、bottom、left または right:
例
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="私はツールチップの内容です!">マウスをここに移動してください</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="私はツールチップの内容です!">マウスをここに移動してください</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="私はツールチップの内容です!">マウスをここに移動してください</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="私はツールチップの内容です!">マウスをここに移動してください</a>
試してみる »