Bootstrapツールチップ・ポップオーバー完全入門｜trigger（hover・focus・click・manual）の使い分けを初心者向けにやさしく解説

1. Bootstrapのツールチップとポップオーバーとは？

1. Bootstrapのツールチップとポップオーバーとは？

Bootstrapのツールチップとポップオーバーは、画面に小さな説明文を表示するための部品です。 ツールチップは「ちょっとした一言メモ」、ポップオーバーは「少し詳しい説明箱」というイメージです。

たとえば、自動販売機のボタンに小さく説明シールが貼ってあるような感覚です。 操作の邪魔をせず、必要なときだけ情報を見せられるのが特徴です。

2. trigger（トリガー）とは何かを超かんたんに理解しよう

2. trigger（トリガー）とは何かを超かんたんに理解しよう

triggerとは「表示するきっかけ」のことです。 ドアが自動で開くか、ボタンを押して開くか、その違いを決めるスイッチのようなものです。

Bootstrapでは主に hover・focus・click・manual の4種類があります。 これを理解すると、ツールチップやポップオーバーを自由に操れるようになります。

3. hoverトリガー｜マウスを乗せたときに表示する

3. hoverトリガー｜マウスを乗せたときに表示する

hoverは「マウスを乗せた瞬間」に表示される方法です。 パソコンでボタンにカーソルを合わせたとき、ふわっと説明が出る場面を想像してください。

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-trigger="hover" title="マウスを乗せると表示されます">
    hoverで表示
</button>

hoverは一番よく使われる方法ですが、スマートフォンではマウス操作がないため注意が必要です。

4. focusトリガー｜クリックしている間だけ表示する

4. focusトリガー｜クリックしている間だけ表示する

focusは「選択されている間だけ表示」されます。 ボタンをクリックしている間は表示され、別の場所を押すと消えます。

キーボード操作やスマートフォンにも優しいのが特徴です。

<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-trigger="focus" title="選択中だけ表示されます">
    focusで表示
</button>

5. clickトリガー｜クリックしたら表示してもう一度で消す

5. clickトリガー｜クリックしたら表示してもう一度で消す

clickは「押したら表示、もう一度押したら消える」動きです。 スイッチ式のライトを想像すると分かりやすいです。

ポップオーバーと相性がよく、詳しい説明を見せたいときに使われます。

<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-trigger="click" title="タイトル" data-bs-content="クリックで表示される説明です">
    clickで表示
</button>

6. manualトリガー｜自分で表示と非表示を完全管理する

6. manualトリガー｜自分で表示と非表示を完全管理する

manualは自動では表示されません。 JavaScriptで「今出して」「今消して」と命令する方法です。

リモコンでテレビを操作するようなイメージです。

<button id="openBtn" class="btn btn-dark">表示</button>
<button id="closeBtn" class="btn btn-secondary">非表示</button>

<script>
const tooltip = new bootstrap.Tooltip(openBtn, {
    title: '手動で制御しています',
    trigger: 'manual'
});

openBtn.addEventListener('click', () => {
    tooltip.show();
});

closeBtn.addEventListener('click', () => {
    tooltip.hide();
});
</script>

7. triggerは複数同時に指定できる

7. triggerは複数同時に指定できる

triggerは一つだけでなく、組み合わせることもできます。 たとえば「hoverとfocusの両方」で表示することが可能です。

<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-trigger="hover focus" title="両方対応">
    hover + focus
</button>

8. 初心者が迷わないtriggerの選び方

8. 初心者が迷わないtriggerの選び方

パソコン中心なら hover、スマートフォン対応なら focus や click が安心です。 自動表示が困る場合や複雑な動きが必要なときは manual を使います。

Bootstrapのツールチップとポップオーバーは、triggerを理解するだけで使いやすさが大きく変わります。

まとめ

まとめ

ここまで、Bootstrapのツールチップとポップオーバーについて、特にtriggerの考え方を中心に解説してきました。 ツールチップやポップオーバーは、画面をすっきり保ちながら必要な情報だけを伝えられる、とても便利な仕組みです。 ただ表示するだけでなく、「いつ」「どの操作で」表示するかを意識することで、使いやすさは大きく変わります。

hoverはマウス操作を前提とした基本的な使い方で、パソコン中心の画面では直感的です。 一方で、スマートフォンやキーボード操作を考えると、focusやclickの方が安心して使える場面も多くあります。 manualは少し難しく感じるかもしれませんが、JavaScriptで完全に制御できるため、複雑な画面や独自の動きを作りたいときに力を発揮します。

Bootstrapでは、HTMLのdata属性を使うだけで多くの設定ができ、必要に応じてJavaScriptを組み合わせられるのが特徴です。 triggerを正しく理解すると、「なぜ表示されないのか」「なぜ勝手に消えるのか」といった初心者がつまずきやすい疑問も自然と解消されます。 また、複数のtriggerを組み合わせることで、パソコンとスマートフォンの両方に配慮した設計も可能になります。

ツールチップは短い補足説明、ポップオーバーは少し詳しい説明、という役割の違いを意識しながら、 triggerを選ぶことが、読みやすく親切な画面づくりにつながります。 Bootstrapを使った画面設計では、見た目だけでなく、操作したときの体験まで考えることが大切です。

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-trigger="hover focus" title="操作に応じて表示されます">
    まとめサンプル
</button>

このように、同じボタンでもtriggerを工夫するだけで、利用者にとって分かりやすい挙動を実現できます。 Bootstrapの基本的な書き方に慣れてきたら、ぜひtriggerの使い分けを意識してみてください。