ポップオーバー（Popovers） v4.0.0設定変更

概要（Overview）

ポップオーバー・プラグインを使用するときに知っておくべきこと：

• ポップオーバーは、サードパーティのライブラリであるPopperを使用して位置情報を取得しているため、ポップオーバーが動作するためには bootstrap.js か bootstrap.min.js の前にpopper.min.jsを組み込むか、代わりにPopperを内部に含む bootstrap.bundle.js か bootstrap.bundle.min.js を使用する必要がある。
• ポップオーバーは、依存関係として、ツールチップ・プラグインが必要。
• ソースファイルからJavaScriptを構築する場合は、util.js が必要。
• ポップオーバーは、パフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある（そのため実行コードが必要）。
• title と content の長さがゼロのポップオーバーは表示されない。
• container: 'body' を指定すると、より複雑なコンポーネント（インプットグループやボタングループなど）のレンダリングの問題が回避可能。
• 非表示要素のポップオーバーは機能しない。
• .disabled または disabled 要素のポップオーバーは、それを囲む要素で起動する必要がある。サンプル
• 複数行にまたがるアンカーから起動されたときは、ポップオーバーはアンカー全体の幅の中央に配置される。この現象を回避するには、<a> に .text-nowrap を使用する。
• ポップオーバーは、対応する要素がDOMから削除される前に非表示にする必要がある。
• ポップオーバーは、シャドウDOM内の要素のために起動可能。

ポップオーバーがどのように動作するかいくつか実例を表示。

どこでもポップオーバーを有効にする例（Example: Enable popovers everywhere）

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

実行コード

JavaScriptの場合コピー$(function () {
	$('[data-toggle="popover"]').popover()
})

HTMLの場合コピー<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	$("[data-toggle=popover]").popover()
</script>

container オプションの使用例（Example: Using the container option）

ポップオーバーに干渉するいくつかのスタイルを親要素に持たせているときは、ポップオーバーのHTMLが代わりにその要素内に表示されるようにカスタムで container の指定をすることを推奨。

実行コード

JavaScriptの場合コピー$(function () {
	$('.example-popover').popover({
		container: 'body'
	})
})

ポップオーバーの設定（Example）v4.0.0一部変更

見本

設定例

HTMLコピー<a class="btn btn-lg btn-danger" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの説明。もう一度ボタンを押すと閉じます。">ココを押して下さい</a>

ポップオーバーの方向設定（Four directions）

上、右、下、左の4つのオプション。

見本

設定例

上に出るポップオーバーコピー<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="上に出るポップオーバー">ポップオーバー(上)</button>

左に出るポップオーバーコピー<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="左に出るポップオーバー">ポップオーバー(左)</button>

下に出るポップオーバーコピー<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="下に出るポップオーバー">ポップオーバー(下)</button>

右に出るポップオーバーコピー<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="右に出るポップオーバー">ポップオーバー(右)</button>

次のクリックで閉じる（Dismiss on next click）

triggerに focus を使用して、切替要素とは別の要素の次のクリックでポップオーバーを閉じる。

見本

設定例

HTMLコピー<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="却下するポップアップ" data-content="ボタンを押しても閉じません。それ以外のところを押して閉じて下さい。">ココを押して下さい</a>

JavaScriptコピー$('.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="無効なポップオーバー">
	<button type="button" class="btn btn-primary" style="pointer-events: none;" disabled>無効ボタン</button>
</span>

使用方法（Usage）

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

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

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

オプション（Options）サンプル v4.6.0一部追加

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

メソッド（Methods）サンプル

$().popover(options)

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

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('dispose') v4.0.0名称変更

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

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

.popover('enable') v4.0.0追加

要素のポップオーバーに表示する機能を与える。デフォルトで有効。

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

.popover('disable') v4.0.0追加

要素のポップオーバーが表示されるようにする機能を削除。ポップオーバーは、再度有効になっている場合にのみ表示可能。

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

.popover('toggleEnabled') v4.0.0追加

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

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

.popover('update') v4.0.0追加

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

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

イベント（Events）

使用例

JavaScript$('#myPopover').on('hidden.bs.popover', function () {
	// 何かをする...
})