ポップオーバー

iOSにあるようなBootstrapポップオーバーをサイト上の任意の要素に追加するためのドキュメントと例です。

概要

ポップオーバープラグインを使用する際の注意点

• ポップオーバーは、位置決めにサードパーティライブラリであるPopperに依存しています。ポップオーバーが機能するためには、bootstrap.js の前にpopper.min.jsを含めるか、Popperを含むbootstrap.bundle.min.js / bootstrap.bundle.jsを使用する必要があります。
• ポップオーバーには、依存関係としてツールチッププラグインが必要です。
• ソースからJavaScriptをビルドしている場合は、util.jsが必要です。
• ポップオーバーはパフォーマンス上の理由からオプトインであるため、**自分で初期化する必要があります**。
• 長さがゼロのtitleとcontentの値は、ポップオーバーを表示しません。
• 複雑なコンポーネント（インプットグループやボタングループなど）でレンダリングの問題を避けるために、container: 'body'を指定してください。
• 非表示の要素でポップオーバーをトリガーしても機能しません。
• .disabledまたはdisabled要素のポップオーバーは、ラッパー要素でトリガーする必要があります。
• 複数行にわたって折り返すアンカーからトリガーした場合、ポップオーバーはアンカーの全体の幅の中央に配置されます。この動作を避けるには、<a>に.text-nowrapを使用してください。
• ポップオーバーは、対応する要素がDOMから削除される前に非表示にする必要があります。
• ポップオーバーは、シャドウDOM内の要素のおかげでトリガーできます。

ポップオーバーがどのように機能するかをいくつかの例で見ていきましょう。

例: すべてのポップオーバーを有効にする

ページ上のすべてのポップオーバーを初期化する1つの方法は、data-toggle属性でそれらを選択することです

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

例: container オプションを使用する

親要素にポップオーバーを妨害するスタイルがある場合は、ポップオーバーのHTMLがその要素内に表示されるように、カスタムのcontainerを指定する必要があります。

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

例

<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つの方向

上、右、下、左揃えの4つのオプションがあります。

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

次のクリックで消去

トグル要素以外の要素をユーザーが次にクリックしたときにポップオーバーを消去するには、focusトリガーを使用します。

<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>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

無効な要素

disabled属性を持つ要素はインタラクティブではないため、ユーザーはポップオーバー（またはツールチップ）をトリガーするためにホバーまたはクリックできません。回避策として、ラッパー<div>または<span>からポップオーバーをトリガーし、無効な要素のpointer-eventsをオーバーライドする必要があります。

無効なポップオーバートリガーの場合、ユーザーが無効な要素をクリックすることを期待していない可能性があるため、data-trigger="hover"を使用して、ポップオーバーがユーザーへの視覚的なフィードバックとしてすぐに表示されるようにすることもできます。

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

使い方

JavaScriptでポップオーバーを有効にする

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

オプション

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

メソッド

$().popover(options)

要素コレクションのポップオーバーを初期化します。

.popover('show')

要素のポップオーバーを表示します。ポップオーバーが実際に表示される前（つまり、shown.bs.popoverイベントが発生する前）に、呼び出し元に制御が戻ります。これはポップオーバーの「手動」トリガーと見なされます。タイトルとコンテンツの両方がゼロ長のポップオーバーは表示されません。

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

.popover('hide')

要素のポップオーバーを非表示にします。ポップオーバーが実際に非表示になる前（つまり、hidden.bs.popoverイベントが発生する前）に、呼び出し元に制御が戻ります。これはポップオーバーの「手動」トリガーと見なされます。

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

.popover('toggle')

要素のポップオーバーを切り替えます。ポップオーバーが実際に表示または非表示になる前（つまり、shown.bs.popoverまたはhidden.bs.popoverイベントが発生する前）に、呼び出し元に制御が戻ります。これはポップオーバーの「手動」トリガーと見なされます。

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

.popover('dispose')

要素のポップオーバーを非表示にして破棄します。デリゲーションを使用するポップオーバー（selectorオプションを使用して作成されたポップオーバー）は、子孫のトリガー要素で個別に破棄することはできません。

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

.popover('enable')

要素のポップオーバーを表示できるようにします。ポップオーバーはデフォルトで有効になっています。

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

.popover('disable')

要素のポップオーバーを表示する機能を削除します。ポップオーバーは、再度有効にされた場合にのみ表示できます。

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

.popover('toggleEnabled')

要素のポップオーバーを表示または非表示にする機能を切り替えます。

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

.popover('update')

要素のポップオーバーの位置を更新します。

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

イベント

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