Bootstrap 5 ツールチップ

ツールチップ

ツールチップコンポーネントは、ユーザーが要素にマウス指を移動したときに現れる小さなポップアップボックスです：

ツールチップの作成方法

ツールチップを作成するには、 data-bs-toggle="tooltip" 属性を要素に追加してください。

以下を使用してください title ツールチップ内に表示されるテキストを指定する属性：

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="素晴らしい！">上にホバーしてください！</button>

注記：ツールチップは JavaScript で初期化する必要があります。

以下のコードは、ドキュメント内のすべてのツールチップを有効にします：

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

自分で試してみる

ツールチップの位置決定

デフォルトでは、ツールチップは要素のトップに表示されます。

以下を使用してください data-bs-placement ツールチップの位置を要素のトップ、ボトム、左側、または右側に設定する属性：

例

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

自分で試してみる