Bootstrap 5 フラッシュメッセージ

弹出框

弹出框（Popover）コンポーネントはツールチップに似ています；ユーザーが要素をクリックしたときに表示される弹出框です。違いは弹出框に多くのコンテンツを含むことができることです。

弹出框の作成方法

弹出框を作成するには、 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で初期化する必要があります。

以下のコードは、ドキュメント内のすべての弹出框を有効にします：

例

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

自分で試してみる

弹出框の定位

デフォルトでは、弹出框は要素の右側に表示されます。

使用してください data-bs-placement 属性設定で弹出框の位置を要素の上、下、左側、または右側に設定します：

例

<a href="#" title="ヘッダー" data-bs-toggle="popover" data-bs-placement="top" data-content="コンテンツ">トップ</a>
<a href="#" title="ヘッダー" data-bs-toggle="popover" data-bs-placement="bottom" data-content="コンテンツ">ボトム</a>
<a href="#" title="ヘッダー" data-bs-toggle="popover" data-bs-placement="left" data-content="コンテンツ">左</a>
<a href="#" title="ヘッダー" data-bs-toggle="popover" data-bs-placement="right" data-content="コンテンツ">右</a>

自分で試してみる

注意：十分なスペースがない場合、placement 属性は期待通りに動作しません。例えば、ページのトップ（空きスペースがない場合）に top placement 属性を使用すると、要素の下や右（空きスペースがある場所）にポップアップが表示されます。

ポップアップを閉じる

デフォルトでは、要素を再びクリックするとポップアップが閉じられますが、 data-bs-trigger="focus" 属性を設定することで、要素の外部をクリックしてもポップアップが閉じられます：

例

<a href="#" title="ドロップダウン" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="ドキュメントのどこかをクリックするとポップアップが閉じられます">クリックしてください</a>

自分で試してみる

ホバーでポップアップ

ヒント：要素にマウス指を移動するとポップアップを表示したい場合は、値を "hover" の data-bs-trigger 属性：

例

<a href="#" title="ヘッダー" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="ポップアップテキスト">上にホバーしてください</a>

自分で試してみる