Bootstrap JS ポップオーバ

❮ 前章へ 次のリファレンス ❯

JS ポップオーバ (popover.js)

ポップオーバプラグインは、ツールチップに似ており、ユーザが要素をクリックしたときに表示されるポップアップボックスのことです。 違いは、ポップオーバの方がずっと多くのコンテンツを含むことができると言うことです。

プラグインの依存関係：Popovers は、tooltip プラグイン (tooltip.js) が Bootstrap のバージョンにインクルード されていることを必要とします。

ポップオーバに関するチュートリアルは、Bootstrap ポップオーバ・チュートリアルご覧ください。

data-* 属性を介して

data-toggle="popover" は、ポップオーバをアクティブにします。

title 属性は、ポップオーバのヘッダーテキストを指定します。

data-content 属性は、ポップオーバ本体内に表示するテキストを指定します。

例

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

JavaScript を介して

ポップオーバは CSS のみのプラグインではないので、jQuery を使って初期化しなければなりません： 指定の要素を選択し、popover() メソッドを呼び出します。

例

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

// Select a specified element
$('#myPopover').popover();
Try it Yourself »

ポップオーバ・オプション

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

名前 型 デフォルト 説明 Try it
animation boolean true

ポップオーバを開くときと閉じるときに、CSS フェードトランジション効果を追加するかどうかを指定する

  • true - フェード効果を追加する
  • false - フェード効果を追加しない
 Try it
container 文字列か、ブール値の false false 指定の要素の後にポップオーバを追加する。
例：container: 'body'		 Try it
content 文字列 "" ポップオーバ本体内のテキストを指定する Try it
delay 数値かオブジェクト 0 ポップオーバを開いたり、閉じたりするのにかかる時間をミリ秒単位で指定する。

開くための遅延と、閉じるための遅延を指定するにはオブジェクト構造を使用する：

delay: {show: 500, hide: 100} - ポップオーバを開くのに 500 ms かかるが、閉じるのは 100 ms です		 Try it
html ブール値  false ポップオーバで HTML タグを容認するかどうかを指定する：
 
  • true - HTML タグを容認する
  • false - HTML タグを容認しない
注: HTML は、title 属性に挿入しなければならない（または title オプションを使用）。

false (デフォルト) に設定したときは、jQuery の text() メソッドが使われる。 XSS 攻撃が心配な場合は、これを使用する		 Try it
placement 文字列 "right" ポップオーバの位置を指定する。指定できる値：

  • "top" - ポップオーバを上に
  • "bottom" - ポップオーバを下に
  • "left" - ポップオーバを左に
  • "right" - ポップオーバを右に
  • "auto" - ポップオーバの位置をブラウザに決定させる。 例えば、値が "auto left" の場合、可能な場合は左に表示されるが、そうでなければ右に表示される。 値が "auto bottom" の場合、可能な場合は下に表示されるが、そうでなければ上に表示される。
 Try it
selector 文字列か、ブール値の false false ポップオーバを指定のセレクタに追加する Try it
template 文字列   ポップオーバを作成する際に使用するベースの HTML。

ポップオーバのタイトルは、.popover-title の中に挿入される。

ポップオーバのコンテンツは、.popover-content の中に挿入される。

.arrow は、ポップオーバの矢印になる。

最も外側のラッパー要素は .popover クラスを持つ必要がある。
title 文字列 "" ポップオーバのヘッダーテキストを指定する Try it
trigger 文字列 "click" ポップオーバのトリガ方法を指定する。指定できる値：

  • "click" - クリックでポップオーバーをトリガする
  • "hover" - ホバーでポップオーバーをトリガする
  • "focus" - タブやクリックなどでフォーカスを取得した時にポップオーバーをトリガする
  • "manual" - 手動でポップオーバーをトリガする
チップ: 複数の値を渡すときは、スペースで区切ります		 Try it
viewport 文字列かオブジェクト {selector: "body", padding: 0} この要素の境界内にポップオーバをキープする。

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

ポップオーバ・メソッド

次の表は、使用できる全ポップオーバ・メソッドの一覧です。

メソッド 説明 Try it
.popover(options) オプション付きでポップオーバをアクティブにする。有効な値については、上記オプションを参照のこと Try it
.popover("show") ポップオーバを表示する Try it
.popover("hide") ポップオーバを隠す Try it
.popover("toggle") ポップオーバを切替える Try it
.popover("destroy") ポップオーバを隠して破壊する Try it

ポップオーバ・イベント

次の表は、使用できる全ポップオーバイベントの一覧です。

イベント 説明 Try it
show.bs.popover ポップオーバが表示されようとしているときに発生 Try it
shown.bs.popover ポップオーバが完全に表示されたときに発生 (CSS のトランジションが完了した後) Try it
hide.bs.popover ポップオーバが隠されようとしているときに発生 Try it
hidden.bs.popover ポップオーバが完全に隠されたときに発生 (CSS のトランジションが完了した後) Try it
Examples

例

カスタム・ポップオーバ・デザイン

ポップオーバの外観をカスタマイズするには CSS を使用します：

例

 /* 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;
}
Try it Yourself »

❮ 前章へ 次のリファレンス ❯