Popoverプラグイン
Popoverプラグインは、ツールチップに似ています。 それは、ユーザーが要素をクリックしたときに表示されるポップアップボックスです。 違いは、ということです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リファレンス 。