ポップオーバー・プラグインは、ツールチップに似ており、ユーザが要素をクリックしたときに表示されるポップアップボックスのことです。 違いは、ポップオーバーの方が多くのコンテンツを含むことができる点です。
チップ: プラグインは、（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>
Try it Yourself »
デフォルトでは、ポップオーバーは、要素の右側に表示されます。
要素の上、下、左、右側にポップオーバーの位置を設定するには、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>
Try it Yourself »
チップ: ブラウザにポップオーバーの位置を決定させる、"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>
Try it Yourself »
チップ:要素上へマウスポインタを移動したときに、ポップオーバーを表示させたい場合は、
"hover" の値を持つ data-trigger 属性を使用します：
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Try it Yourself »
すべてのポップオーバーのオプション、メソッドおよびイベントの完全なリファレンスは、 Bootstrap JS ポップオーバー・リファレンスをご覧ください。