ブートストラップ4ポップオーバー
ブートストラップ4ポップオーバー
ポップオーバーコンポーネントはツールチップに似ています。これは、ユーザーが要素をクリックしたときに表示されるポップアップボックスです。違いは、ポップオーバーにははるかに多くのコンテンツを含めることができるということです。
ポップオーバーを切り替えますポップオーバーを作成する方法
ポップオーバーを作成するには、data-toggle="popover"
属性を要素に追加します。
属性を使用しtitleてポップオーバーのヘッダーテキストを指定し、属性を使用してdata-contentポップオーバーの本文内に表示するテキストを指定します。
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
注：ポップオーバーはjQueryで初期化する必要があります。指定された要素を選択してpopover()メソッドを呼び出します。
次のコードは、ドキュメント内のすべてのポップオーバーを有効にします。
例
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
ポップオーバーの配置
デフォルトでは、ポップオーバーは要素の右側に表示されます。
この属性を使用してdata-placement、要素の上部、下部、左側、または右側のポップオーバーの位置を設定します。
例
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
注：配置属性に十分なスペースがない場合、配置属性は期待どおりに機能しません。例：ページの上部（スペースがない場合）で一番上の配置を使用すると、代わりに要素の下または右側（スペースがある場合）にポップオーバーが表示されます。
ポップオーバーを閉じる
デフォルトでは、要素をもう一度クリックするとポップオーバーは閉じられます。data-trigger="focus"ただし、要素の外側をクリックするとポップオーバーを閉じる属性を使用できます。
例
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
ヒント：マウスポインタを要素の上に移動したときにポップオーバーを表示する場合はdata-trigger、値が「ホバー」の属性を使用します。
例
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
完全なブートストラップポップオーバーリファレンス
すべてのポップオーバーオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSポップオーバーリファレンスにアクセスしてください。