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>