Bootstrapツールチップ・ポップオーバーをきれいに配置する完全ガイド｜placementと自動配置をやさしく解説

きれいに配置する：placement（top/bottom/start/end）と自動配置

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのツールチップって、文字の上に説明が出るやつですよね？でも位置がバラバラで…」

先生

「そうですね。実は表示する位置を自分で決めたり、自動で調整させることができるんです。」

生徒

「パソコンもあまり触ったことがないんですが、それでも使えますか？」

先生

「大丈夫です。置き場所を決める感覚で考えると、とても簡単ですよ。」

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

Bootstrapのツールチップとポップオーバーは、ボタンや文字の近くに補足説明を表示するための仕組みです。例えるなら、教科書の端にある小さなメモのような存在です。普段は見えませんが、マウスを合わせたり、クリックしたときにだけ表示されます。これにより、画面をすっきり保ちながら、必要な説明を伝えることができます。

2. placementとは何かをイメージで理解しよう

placementとは「どこに表示するか」という意味です。英語ですが、難しく考える必要はありません。上、下、左、右のどこに吹き出しを出すかを指定するだけです。机の上にメモを置くとき、「ノートの上に置く」「下に置く」と決める感覚と同じです。

3. topとbottomの配置方法

topは要素の上に表示し、bottomは下に表示します。ボタンの説明を下に出したいときはbottom、視線の流れ的に上に出したいときはtopが便利です。


<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="上に表示される説明">
    上にツールチップ
</button>

ブラウザ表示

4. startとendの配置方法

startとendは左右を表します。日本語の文章は左から右へ読むので、 startは左側、endは右側と覚えると分かりやすいです。画面の端にボタンがある場合、外にはみ出さないように使われることが多いです。


<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="end" title="右に表示されます">
    右にツールチップ
</button>

ブラウザ表示

5. 自動配置とは何か

自動配置は、Bootstrapが「はみ出さない場所」を自動で選んでくれる仕組みです。まるでナビゲーションが渋滞を避けて道を選んでくれるようなものです。画面の端やスマートフォン表示でも安心して使えます。


<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="auto" title="自動で位置が決まります">
    自動配置
</button>

ブラウザ表示

6. ポップオーバーでもplacementは同じ

ポップオーバーでも考え方は同じです。ツールチップより少し大きな説明を表示したいときに使います。表示位置の指定方法も同じなので、一度覚えれば両方で使えます。


<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="bottom" title="タイトル" data-bs-content="下に表示される説明文です">
    ポップオーバー表示
</button>

ブラウザ表示