Bootstrapポップオーバー入門！data-bs-toggle="popover"とtitle・contentを完全解説

ポップオーバー入門：data-bs-toggle="popover" と title/content の指定

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

生徒

「Webページで、ボタンを押したら説明がふわっと出てくるのを見たことがあります。あれは何ですか？」

先生

「それはBootstrapのポップオーバーという機能です。必要なときだけ説明を表示できます。」

生徒

「難しそうですが、パソコンをほとんど触ったことがなくても使えますか？」

先生

「大丈夫です。ボタンに決まった文字を書くだけで使えるので、順番に見ていきましょう。」

1. Bootstrapのポップオーバーとは何か

Bootstrapのポップオーバーとは、ボタンや文字をクリックしたときに、小さな説明用の箱が表示される仕組みです。紙の説明書でいうと、横に付いている吹き出しメモのような存在です。常に表示すると画面がごちゃごちゃしますが、必要なときだけ表示できるのが特徴です。BootstrapはWebページの見た目を簡単に整えるための道具箱のようなもので、その中にポップオーバーという便利な部品が用意されています。

2. data-bs-toggle="popover"の役割

ポップオーバーを使うために一番大切なのがdata-bs-toggle="popover"です。これは「このボタンはポップオーバーを使いますよ」という合図になります。電化製品でいうと、スイッチに貼ってある説明シールのようなものです。これを書かないと、Bootstrapはただのボタンだと認識してしまい、説明は表示されません。


<button type="button" class="btn btn-primary" data-bs-toggle="popover">
    説明を見る
</button>

ブラウザ表示

3. titleで指定する見出しの意味

titleは、ポップオーバーの一番上に表示される見出し部分です。本のタイトルのような役割を持っています。短く内容を伝える言葉を書くと、見る人が「何の説明なのか」をすぐ理解できます。titleを書かなくても使えますが、初心者向けの画面では書いておくと親切です。


<button type="button" class="btn btn-success"
        data-bs-toggle="popover"
        title="操作の説明">
    操作方法
</button>

ブラウザ表示

4. contentで指定する説明文の考え方

contentは、ポップオーバーの中身となる説明文です。ここに詳しい内容を書きます。紙に付箋を貼って補足説明を書くイメージです。長すぎる文章を書くと読みにくくなるので、二行から三行程度の短い説明がおすすめです。


<button type="button" class="btn btn-warning"
        data-bs-toggle="popover"
        title="注意点"
        data-bs-content="このボタンを押すと保存されます。">
    保存
</button>

ブラウザ表示

5. ポップオーバーを動かすための初期化

ポップオーバーは、見た目の設定だけでは動きません。最初に「これからポップオーバーを使います」と宣言する初期化が必要です。これは会場の照明を入れるスイッチのようなもので、一度入れればページ内のポップオーバーが動き出します。


<script>
document.addEventListener('DOMContentLoaded', function () {
    var popoverTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="popover"]')
    );
    popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
    });
});
</script>

ブラウザ表示