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

概要（Overview）

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

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

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

実例（Examples）

ポップオーバーを有効にする（Enable popovers）v5.2.0設定変更

前記のように、ポップオーバーを使用する前に初期化する必要がある。ページ上のすべてのポップオーバーを初期化する1つの方法は、次のように data-bs-toggle 属性で選択：

Bootstrap5.2.0の実行コード例 緑背景が5.2.0での変更箇所

JavaScriptconst popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

※Bootstrap5.1.3の実行コード例 赤背景が5.2.0での変更箇所

JavaScriptvar popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

※Bootstrap4.xの実行コード例

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

ポップオーバーの設定（Live demo）v5.2.0デザイン変更

前記のスニペットと同様のJavaScriptを使用して、次のライブポップオーバーをレンダリング。タイトルは title 属性で設定され、本文のコンテンツは data-bs-content で設定される。

見本

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所

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

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

上、右、下、左の4つのオプションを使用できる。RTL（右書き）でBootstrapを使用すると、方向が反転する。方向を変更するには、data-bs-placement を設定。

見本

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所

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

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

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

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

カスタム container（Custom container）v5.2.0設定変更、「container オプションの使用例」から変更、v5.2.1一部追加

親要素にポップオーバーと干渉するスタイルがある場合は、カスタムの container を指定して、ポップオーバーのHTMLがその要素内に表示されるようにする必要がある。これは、一般的にレスポンシブテーブル、インプットグループなどがある。

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

※Bootstrap4.xの設定例

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

明示的なカスタム container を設定する必要があるもう1つの状況は、モーダルダイアログ内のポップオーバーであり、ポップオーバー自体がモーダルに追加されるようにする。これは、インタラクティブな要素を含むポップオーバーにとって特に重要。モーダルダイアログはフォーカスをトラップするため、ポップオーバーがモーダルの子要素でない限り、ユーザーはこれらのインタラクティブな要素にフォーカスしたりアクティブにしたりすることができない。

設定例 v5.2.1追加

JavaScriptconst popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

カスタムポップオーバー（Custom popovers）v5.2.0新設

CSS変数を使用して、ポップオーバーの外観をカスタマイズできる。data-bs-custom-class="custom-popover" を使用してカスタムクラスを設定し、カスタムの外観を調査し、それを使用してローカルのCSS変数を再定義。

ポップオーバーの外観をPrimaryにする例

見本

設定例

CSS.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

HTML<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="custom-popover" title="カスタムポップオーバー" data-bs-content="このポップオーバーは、CSS変数を経由してテーマ化されている。">
  カスタムポップオーバー
</button>

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

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

見本

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所

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

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

※Bootstrap4.xの設定例

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

無効な要素（Disabled elements）v5.0.0-beta2設定変更

disabled 属性を持つ要素はインタラクティブではないため、ユーザーがカーソルを移動したりクリックしてポップオーバー（またはツールチップ）を起動できない。回避策として、ラッピング要素の <div> や <span> からポップオーバーを起動することを推奨。理想的には、tabindex ="0" を使用してキーボードフォーカスを可能にする。

無効化されたポップオーバーを起動する場合、無効化された要素をクリックすることを期待しないため、ポップオーバーがユーザーに即座に視覚的フィードバックとして表示されるように、data-bs-trigger="hover focus" も選択できる。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="無効ボタンのポップオーバー">
<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
</span>

※Bootstrap4.xの設定例 赤背景が変更箇所

<span class="d-inline-block" data-toggle="popover" data-content="無効ボタンのポップオーバー">
<button type="button" class="btn btn-primary" style="pointer-events: none;" disabled>無効ボタン</button>
</span>

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0新設

Bootstrapの進化するCSS変数アプローチの一環として、ポップオーバーは、リアルタイムのカスタマイズを強化するために、.popover でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_popover.scss 内 popover-css-vars の設定--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 popover-variables の設定$popover-font-size:                 $font-size-sm;
$popover-bg:                        var(--#{$prefix}body-bg);
$popover-max-width:                 276px;
$popover-border-width:              var(--#{$prefix}border-width);
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             var(--#{$prefix}border-radius-lg);
$popover-inner-border-radius:       $popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list
$popover-box-shadow:                var(--#{$prefix}box-shadow);

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 var(--#{$prefix}secondary-bg);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                var(--#{$prefix}body-color);
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

// fusv-disable
// Bootstrap5.2.0では非推奨のCSS変数
$popover-arrow-color:               $popover-bg;
$popover-arrow-outer-color:         var(--#{$prefix}border-color-translucent);
// fusv-enable

使用方法（Usage）v5.2.0設定変更

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

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

※Bootstrap4.xの設定例

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

オプション（Options）v5.0.0-beta1オプション追加、v5.0.0-beta2一部変更

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）にご変更下さい。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

popperConfig でfunctionを使用 v5.0.0-beta2追加、v5.2.0設定変更

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // 必要に応じてdefaultBsPopperConfigを使用...
    // newPopperConfigを返す
  }
})

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // 必要に応じてdefaultBsPopperConfigを使用...
    // newPopperConfigを返す
  }
})

メソッド（Methods）v5.0.0-alpha1設定変更、v5.0.2メソッド追加

Bootstrap5.3.3の設定例 緑背景が5.2.0以降の変更箇所

JavaScript// getOrCreateInstanceの実例
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Bootstrapポップオーバー・インスタンスを返す

// setContentの実例
popover.setContent({
  '.popover-header': '別のタイトル',
  '.popover-body': '別の内容'
})

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScript// getOrCreateInstanceの実例
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl)

// setContentの実例
myPopover.setContent({
  '.popover-header': '別のタイトル',
  '.popover-body': '別の内容'
})

イベント（Events）

使用例 v5.2.0設定変更

JavaScriptconst myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // 何かをする...
})