Popovers

Popovers(ポップオーバー)についてのドキュメントと例です。

Overview

Popover Pluginを使用するときに知っておくべきこと：

• 第三者のライブラリ Popper.js で位置を取得します。bootstrap.jsの前にpopper.min.js を含めるか Popper.jsを含む bootstrap.bundle.min.js か bootstrap.bundle.js を使用する必要があります。
• 依存関係として tooltip plugin が必要です。
• ソースからJavaScriptを部いるどする場合は requires util.js が必要です。
• パフォーマンス上の理由からオプトインするので, 自分で初期化する必要があります。
• 長さが0のtitle や content はポップオーバーを表示されません
• container: 'body' を指定すると, 複雑なコンポーネント（インプットグループ,ボタングループなど）のレンダリングの問題が回避可能です。
• 非表示要素のポップオーバーは機能しません。
• .disabled , disabled 要素のポップオーバーはそれを囲む要素で起動する必要があります。
• 複数行にまたがるアンカーからトリガーすると, アンカーの全体的な幅の中央にポップオーバーが配置されます。この動作を避けるために <a> に text-nowrap を使用します。
• ポップオーバーは, 対応する要素がDOMから削除される前に非表示にする必要があります。

どのように動作するかは下記を参考にしてください。

Example: Enable popovers everywhere

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

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

Example: Using the container option

ポップオーバーに干渉するスタイルが親要素にある場合は, ポップオーバーのHTMLが代わりにその要素内に表示されるように container の指定をすることを推奨します。

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

Example

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

Four directions

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

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

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

Dismiss on next click

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 elements

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>

Usage

JavaScriptでポップオーバーを有効にします：

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

Options

オプションは, データ属性またはJavaScriptを使用して渡すことが可能です。データ属性の場合, data- にオプション名を追加できます。

Methods

$().popover(options)

ポップオーバーを初期化します。

.popover('show')

ポップオーバーを表示します。実際にポップオーバーが表示される前（ show.bs.popover の発動前）に呼び出し元に戻ります。 ポップオーバーの "manual" トリガーとみなされます。タイトルとコンテンツの両方が長さゼロのポップオーバーは決して表示されません。

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

.popover('hide')

ポップオーバーを非表示にします。ポップオーバーが実際に隠される前（ hidden.bs.popover が発生する前）に呼び出し元に戻ります。手動のトリガとみなされます。

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

.popover('toggle')

ポップオーバーを切り替えます。ポップオーバーの前に呼び出し元に戻りますが, 実際に表示または非表示にされている（ shown.bs.popover , hidden.bs.popover が発生します）。手動のトリガとみなされます。

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

.popover('dispose')

ポップオーバーを隠したり破棄したりします。（ the selector option で作成されます。）子孫トリガー要素で個別に破棄することはできません。

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

.popover('enable')

ポップオーバーに表示する機能を与えます。デフォルトでは, ポップオーバーが有効になっています。

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

.popover('disable')

ポップオーバーが表示されるようにする機能を削除します。ポップオーバーは, 再び有効にされた場合にのみ表示することができます。

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

.popover('toggleEnabled')

ポップオーバーが表示または非表示になるように切り替えます。

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

.popover('update')

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

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

Events

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