最新のWeb開発のチュートリアル
 

Bootstrap Popover Plugin


Popoverプラグイン

Popoverプラグインは、ツールチップに似ています。 それは、ユーザーが要素をクリックしたときに表示されるポップアップボックスです。 違いは、ということですpopoverはるかに多くのコンテンツを含めることができます。

Click To Toggle Popover

ヒント:プラグインは、(使用して、個別に含めることができるBootstrap's個々の"popover.js"ファイル)、またはすべてを一度に(使用して"bootstrap.js"または"bootstrap.min.js" )。


作成する方法Popover

作成するにはpopover 、追加data-toggle="popover"の要素に属性を。

使用titleポップオーバーのヘッダーテキストを指定し、使用するために属性をdata-content内に表示するテキストを指定する属性をpopover's身体を:

<a href="#" data-toggle="popover" title=" Popover Header" data-content="Some content inside the popover">Toggle popover</a>

注: Popovers jQueryを使って初期化しなければなりません:指定された要素を選択して呼び出すpopover()メソッドを。

次のコードはすべて有効になりますpopovers文書で:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>
»それを自分で試してみてください

ポジショニングPopovers

デフォルトでは、 popover要素の右側に表示されます。

使用するdata-placementの位置を設定する属性をpopover上、下、左または要素の右側にあります:

<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"ブラウザがの位置を決めるようになる、 popover 。 値がある場合たとえば、 "auto left"popover可能な場合はそれ以外の場合は右側に、左側に表示されます。


閉会Popovers

デフォルトでは、 popover再度要素をクリックしたときに閉じられています。 ただし、使用することができdata-trigger="focus"閉じます属性popoverエレメントの外側をクリックしたときに:

<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>
»それを自分で試してみてください

ヒント:必要であればpopover使用する、要素の上にマウスポインタを移動したときに表示されるdata-triggerの値を持つ属性を"hover"

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
»それを自分で試してみてください

完了してBootstrap Popoverリファレンス

すべての完全なリファレンスについてはpopoverオプション、メソッドおよびイベント、私たちに行くBootstrap JS Popoverリファレンス