ポップオーバー

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

概要

popover プラグインを使用する際に知っておくべきこと:

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

読み続けて、いくつかの例でポップオーバーがどのように機能するかを確認してください。

例: どこでもポップオーバーを有効にする

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

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

例:containerオプションの使用

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

$(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 つのオプションを使用できます。

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

次のクリックで閉じる

トリガーを使用して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)

オプション

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

メソッド

$().popover(options)

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

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

要素のポップオーバーを切り替えます。ポップオーバーが実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。これは、ポップオーバーの「手動」トリガーと見なされます。shown.bs.popoverhidden.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…
})