Bootstrap5 ポップオーバー
ポップオーバーはツールチップに似たコントロールで、要素をクリックした後に表示されます。ツールチップと異なり、より多くの内容を表示できます。
ポップオーバーを作成する方法
要素に追加することでdata-bs-toggle="popover"ポップオーバーを作成します。
title属性の内容はポップオーバーのタイトルです。data-bs-content属性はポップオーバーのテキスト内容を示します：
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="ポップオーバーのタイトル" data-bs-content="ポップオーバーの内容">何度もクリック</button>
注意：ポップオーバーは JavaScript の初期化コードに記述する必要があります。
次の例では、ドキュメント内のどこでもポップオーバーを使用できます。
例
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
試してみる »
ポップオーバーの位置を指定する
デフォルトでは、ポップオーバーは要素の右側に表示されます。
使用できますdata-bs-placement属性でポップオーバーの表示方向を設定します: top、bottom、left または right:
例
<a href="#" title="タイトル" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="私は内容部分です">クリック</a>
<a href="#" title="タイトル" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="私は内容部分です">クリック</a>
<a href="#" title="タイトル" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="私は内容部分です">クリック</a>
<a href="#" title="タイトル" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="私は内容部分です">クリック</a>
試してみる »
ポップオーバーを閉じる
デフォルトでは、ポップオーバーは指定要素を再度クリックすると閉じます。使用できるのは、data-bs-trigger="focus"属性で、要素の外側の領域をクリックしたときにポップオーバーを閉じるように設定します：
例
<a href="#" title="ポップオーバーを閉じる" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="ドキュメントの他の場所をクリックすると閉じます">クリック</a>
試してみる »
ヒント：マウスが要素の上に移動したときに表示され、外すと消える効果を実現したい場合は、使用できますdata-bs-trigger属性の値を "hover" に設定します：
例
<a href="#" title="タイトル" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="何らかの内容">マウスをここに移動</a>
試してみる »