popover.js

iPadにあるような小さなオーバーレイを、副次的な説明を加えたい要素に追加します。

タイトルとコンテンツの両方の文字列長がゼロのポップオーバーが表示されることはありません。

プラグイン依存
ポップオーバーは、あなたのBootstrapのバージョンに含まれるツールチッププラグインを必要とします。

$(function () {
  $('[data-toggle="popover"]').popover()
})

ボタングループとinputグループ内のツールチップに必須となる特別な設定
.btn-groupまたは.input-group内の要素にポップオーバーを使用する際に、 思わぬ副作用(ツールチップがトリガされた際の要素の幅の間延び/角丸の喪失のような)を避けるためにオプションにcontainer: 'body'(後述)を指定する必要があります。

非表示(hidden)要素でツールチップを表示しようとしないでください
display: none;の要素を対象として$(...).popover('show')を実行すると、 ポップオーバーはふさわしくない場所に位置取りされてしまいます。

無効化(disabled)要素でのポップオーバーはラッパー要素を必要とします
disabledまたは.disabled要素にポップオーバーを追加するために、 その要素を<div>の中に配置し、代わりにその<div>にポップオーバーを適用します。

複数行のリンク 時に、あなたは複数行を囲うリンクに対してポップオーバーを追加したいと考えるかもしれません。 ポップオーバープラグインのデフォルトの挙動では、水平方向と垂直方向の中央に配置されます。 これを避けるために、アンカー要素にwhite-space: nowrap;を追加してください。

• 使用例
• 使用方法
• オプション
• メソッド
• イベント

使用例

静的なポップオーバー

top、right、bottom、leftの寄せのための4つのオプションが利用可能です。

ライブデモ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

4つの方向

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

次のクリックで反応しないようにする

focusトリガを使用して、ユーザーによる次のクリックでポップオーバーが反応しないようにします。

次のクリックが反応しないために必要なマークアップ
クロスブラウザとクロスプラットフォームにおいて問題なく動作させるためには、 <button>タグでは無く、<a>タグを使用しなければいけません。 また、role="button"とtabindex属性も含めなければいけません。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

使用方法

JavaScriptを通して、ポップオーバーを有効化します。

$('#example').popover(options)

オプション

オプションはdata属性またはJavaScriptを通して渡すことが可能です。 data属性はdata-animation=""のようにして、data-の後ろにオプション名を追加します。

<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

ポップオーバーへの特定のdata属性
前述したように、特定のポップオーバーのためのオプションはdata属性を使用することで代わりに指定することが可能です。

メソッド

$().popover(options)

対象の要素集合に対してポップオーバーを初期化します。

.popover('show')

その要素のポップオーバーを表示します。 ポップオーバーが実際に表示される前に、呼び出し元へ返されます。 (つまり、shown.bs.popoverイベントの発生前) これは、ポップオーバーの"manual"トリガに対して考慮されたものです。 titleとcontentの文字列長がゼロのポップオーバーが表示されることはありません。

$('#element').popover('show')

.popover('hide')

対象の要素のポップオーバーを非表示にします。 ポップオーバーが実際に非表示にされる前に、呼び出し元へ返されます。 (つまり、hidden.bs.popoverイベントの発生前) これは、ポップオーバーの"manual"トリガに対して考慮されたものです。

$('#element').popover('hide')

.popover('toggle')

対象の要素のポップオーバーの表示/非表示を切り替えます。 ポップオーバーが実際に表示/非表示にされる前に、呼び出し元へ返されます。 (つまり、shown.bs.popoverまたはhidden.bs.popoverイベントの発生前) これは、ポップオーバーの"manual"トリガに対して考慮されたものです。

$('#element').popover('toggle')

.popover('destroy')

対象の要素のポップオーバーを非表示にして削除します。 委譲(delegation)を使用するポップオーバー(selectorオプションを使用して作成された)は、 子孫のトリガ要素を個別に削除することは出来ません。

$('#element').popover('destroy')

イベント

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

 Back to top