ブートストラップポップオーバープラグイン
ポップオーバープラグイン
Popoverプラグインはツールチップに似ています。これは、ユーザーが要素をクリックしたときに表示されるポップアップボックスです。違いは、ポップオーバーにははるかに多くのコンテンツを含めることができるということです。
ヒント: プラグインは、個別に(Bootstrapの個別の「popover.js」ファイルを使用して)含めることも、一度に(「bootstrap.js」または「bootstrap.min.js」を使用して)含めることもできます。
ポップオーバーを作成する方法
ポップオーバーを作成するには、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>
ヒント:「auto」の値でdata-placement属性を使用することもできます。これにより、ブラウザーがポップオーバーの位置を決定できるようになります。たとえば、値が「auto left」の場合、ポップオーバーは可能な場合は左側に表示され、そうでない場合は右側に表示されます。
ポップオーバーを閉じる
デフォルトでは、要素をもう一度クリックするとポップオーバーは閉じられます。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ポップオーバーリファレンスにアクセスしてください。