ポップオーバー

ポップオーバープラグイン

Popoverプラグインはツールチップに似ています。ユーザーが要素をクリックすると表示されるポップアップボックスです。違いは、ポップオーバーにはもっと多くのコンテンツが含まれることです。

ヒント: プラグインは個別に("popover.js"ファイルを使用)、または一度に( "bootstrap.js"または "bootstrap.min.js"を使用)組み込むことができます。

ポップオーバーの作成

ポップオーバーを作成するには、 data-toggle="popover" 属性を要素に追加します。 title 属性を使用してポップオーバーのヘッダーテキストを指定し、 data-content 属性を使用してポップオーバーの本文内に表示されるテキストを指定します。

ポップオーバー
<a href="#" data-toggle="popover" title="ヘッダー" data-content="これはポップオーバーです。">ポップオーバー</a>

注意:Popoverは、jQueryで初期化する必要があります。指定した要素を選択し、popover()メソッドを呼び出します。
次のコードは、ドキュメント内のすべてのポップオーバーを有効にします。

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

ポジショニング

デフォルトでは、要素の右側にポップオーバーが表示されます。
data-placement 属性を使用して、要素の上、下、左または右にポップオーバーの位置を設定できます。

<a href="#" title="ヘッダー" data-toggle="popover" data-placement="top" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-placement="bottom" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-placement="left" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-placement="right" data-content="ポップオーバー">Click</a>

ヒント: 「auto」の値を持つ data-placement 属性を使用して、ブラウザがツールチップの位置を決定できるようにすることもできます。たとえば、値が "auto left"の場合、ツールチップは可能な場合は左側に表示され、そうでない場合は右側に表示されます。

ポップオーバーを閉じる

デフォルトでは、要素を再度クリックするとポップオーバーが閉じられます。ただし、 data-trigger="focus" 属性を使用すると、要素の外側をクリックするとポップオーバーを閉じることができます。

<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="ポップオーバー">Click</a>

ヒント: 要素上にマウスポインタを移動したときにポップオーバーが表示されるようにするには、 data-trigger 属性に "hover"という値を指定します。

<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="ポップオーバー">Click</a>
<a href="#" title="ヘッダー" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="ポップオーバー">Click</a>