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

Bootstrap JS Popover

❮前 次リファレンス❯

JS Popover (popover.js)

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

プラグインの依存関係： Popoversツールチッププラグインが必要です(tooltip.js)のバージョンに含まれるようにBootstrap 。

約チュートリアルについてPopovers 、私たちの読みBootstrap Popoverのチュートリアルを 。

ヴィアdata-*属性

data-toggle="popover"アクティブにpopover 。

title属性は、ヘッダーテキストを指定popover 。

data-content属性は、内に表示するテキストを指定するpopover's体を。

例

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
»それを自分で試してみてください

JavaScriptを介して、

Popovers CSS-プラグインだけではありませんので、jQueryを使って初期化しなければなりません：指定された要素を選択して呼び出すpopover()メソッドを。

例

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
»それを自分で試してみてください

Popoverオプション

オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性の場合は、にオプション名を追加data-のように、 data-placement=""

名 タイプ デフォルト 説明 それを試してみてください
animationbooleantrue

開閉時にCSSのフェードトランジション効果を追加するかどうかを指定popover

  • 真 - フェージング効果を追加します。
  • 偽 - フェージング効果を追加しないでください
それを試してみてください
containerstring, or the boolean falsefalse 追加popover特定の要素に。
例：コンテナ： 'body' 		それを試してみてください
contentstring"" 内のテキストを指定popover's body それを試してみてください
delaynumber, or object0 それが開閉するのにかかるミリ秒数を指定popover 。

開口部の遅延や閉鎖のための別のものを指定するには、オブジェクト構造を使用します。

delay: {show: 500, hide: 100} -開くために500ミリ秒かかりますpopoverそれを閉じることが、唯一の100ミリ 		それを試してみてください
htmlbooleanfalse でHTMLタグを受け入れるかどうかを指定しますpopover ：
  • true HTMLタグを受け入れます-
  • false - HTMLタグを受け入れないでください
注意：HTMLは、title属性に挿入（またはタイトルのオプションを使用）する必要があります。

false（デフォルト）に設定すると、jQueryのtext()メソッドが使用されます。 あなたはXSS攻撃を心配している場合は、これを使用します 		それを試してみてください
placementstring"right" 指定popover位置を。 可能な値：

  • "top" - Popoverトップに
  • "bottom" - Popover底に
  • "left" - Popover左側に
  • "right" - Popover右側に
  • "auto" -ブラウザがの位置を決めることができますpopover 。 値がある場合たとえば、 "auto left" 、 popover可能な場合はそれ以外の場合は右側に、左側に表示されます。 値がある場合は"auto bottom" 、 popover可能な場合はそうでない上に、下に表示されます
それを試してみてください
selectorstring, or the boolean falsefalse 追加popover指定したセレクタに それを試してみてください
templatestring  ポップオーバーを作成する際のベースHTMLに使用します。

popover'sタイトルは.popoverタイトルに注入されます。

popover'sコンテンツが.popover、コンテンツ内に注入されます。

.arrowなりますpopover's矢印。

最も外側のラッパー要素は持っている必要があり.popoverクラスを。
titlestring"" ヘッダーテキストを指定popover それを試してみてください
triggerstring"click" 方法を指定popoverトリガされます。 可能な値：

  • "click" -トリガーpopoverクリックで
  • "hover" -トリガーpopoverホバーに
  • "focus" -トリガーpopoverそれが（タブ移動または.egクリックして）フォーカスを取得したとき
  • "manual" -トリガーpopover手動で
ヒント：スペースで区切り、複数の値を渡すには 		それを試してみてください
viewportstring, or object{selector: "body", padding: 0} キープpopoverこの要素の境界内を。

例： viewport: '#viewport'または{selector: '#viewport', padding: 0}

Popoverメソッド

次の表は、使用可能なすべて一覧表示されますpopover方法を。

方法 説明 それを試してみてください
.popover( options ) オプションでポップオーバーを有効にします。 有効な値については、上記のオプションを参照してください。 それを試してみてください
.popover("show") 示しているpopover それを試してみてください
.popover("hide") 隠しpopover それを試してみてください
.popover("toggle") ポップオーバーを切り替えます それを試してみてください
.popover("destroy") 隠し、ポップオーバーを破壊します それを試してみてください

Popoverイベント

次の表は、使用可能なすべて一覧表示されますpopoverイベントを。

イベント 説明 それを試してみてください
show.bs.popover ときに発生しますpopover表示される前に、 それを試してみてください
shown.bs.popover ときに発生しますpopover完全に示されている（CSSの遷移が完了した後） それを試してみてください
hide.bs.popover ときに発生しますpopover非表示にされます それを試してみてください
hidden.bs.popover ときに発生しますpopover完全に隠されている（CSSの遷移が完了した後） それを試してみてください
例

例

カスタムPopoverデザイン

外観をカスタマイズするためにCSSを使用して、 popover ：

例

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
»それを自分で試してみてください

❮前 次リファレンス❯