Bootstrap5 ポップアップボックス

Bootstrap5 弹出框

この記事では、Bootstrap5 のポップオーバー (Popover) コンポーネントの使い方について解説します。ポップオーバーの作成方法、スタイルと動作のカスタマイズ方法などを説明します。

目次

  1. Bootstrap ポップオーバー
  2. ポップオーバーの作成
  3. ポップオーバーのオプション
  4. ポップオーバーのメソッド
  5. HTML を使用する方法
  6. JavaScript を使用する方法
  7. オプション一覧
  8. メソッド一覧

1. Bootstrap ポップオーバー

ポップオーバーは、マウスを要素にホバーしたり、クリックしたりしたときに、追加情報を表示するために使用します。ポップオーバーを使用するには、Tooltip プラグインを導入する必要があります。

2. ポップオーバーの作成

ポップオーバーは、data 属性または JavaScript を使用して作成できます。

2.1 data 属性を使用する方法

以下の data 属性を使用して、ポップオーバーを作成できます。

  • data-bs-toggle="popover": ポップオーバーを有効にします。
  • data-bs-content="ポップオーバーの内容": ポップオーバーの内容を設定します。
  • title 属性: ポップオーバーのタイトルを設定します。
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

2.2 JavaScript を使用する方法

JavaScript を使用してポップオーバーを作成するには、次のコードを使用します。

<button type="button" class="btn btn-secondary" id="popover-button">Popover on top</button>

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

3. ポップオーバーのオプション

ポップオーバーのオプションは、data 属性または JavaScript オブジェクトを使用して設定できます。

3.1 data 属性を使用する方法

data 属性を使用してオプションを設定するには、属性名のプレフィックスとして data-bs- を使用します。たとえば、animation オプションを false に設定するには、data-bs-animation="false" を使用します。

3.2 JavaScript オブジェクトを使用する方法

JavaScript オブジェクトを使用してオプションを設定するには、ポップオーバーのコンストラクタに関数を渡します。

var myPopover = new bootstrap.Popover(document.getElementById('myPopover'), {
  animation: false
})

4. ポップオーバーのメソッド

ポップオーバーのメソッドは、JavaScript を使用してポップオーバーの動作を制御するために使用します。

主なメソッドを以下の表に示します。

メソッド 説明
show ポップオーバーを表示します。
hide ポップオーバーを非表示にします。
toggle ポップオーバーの表示状態を切り替えます。
dispose ポップオーバーを破棄します。
enable ポップオーバーを有効にします。
disable ポップオーバーを無効にします。
toggleEnabled ポップオーバーの有効状態を切り替えます。
update ポップオーバーの位置と内容を更新します。

5. HTML を使用する方法

以下は、HTML を使用してポップオーバーを作成する例です。

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover content">
  Click me
</button>

6. JavaScript を使用する方法

以下は、JavaScript を使用してポップオーバーを作成する例です。

<button type="button" class="btn btn-primary" id="myPopover">
  Click me
</button>

<script>
  var popover = new bootstrap.Popover(document.getElementById('myPopover'), {
    title: 'Popover title',
    content: 'Popover content'
  });
</script>

7. オプション一覧

オプション 説明 デフォルト値
animation CSS3 アニメーションを使用するかどうか。 true
container ポップオーバーの親要素。 false
delay ポップオーバーの表示と非表示の遅延時間 (ミリ秒)。 0
html ポップオーバーの内容に HTML コードを含めることができるかどうか。 false
placement ポップオーバーの配置。 'top'
selector ポップオーバーをトリガーする要素。 false
template ポップオーバーの HTML 構造をカスタマイズするためのテンプレート。 '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
trigger ポップオーバーの表示をトリガーするイベント。 'click'
content ポップオーバーの内容。 ''
title ポップオーバーのタイトル。 ''
sanitize ポップオーバーの内容をサニタイズするかどうか。 true

8. メソッド一覧

メソッド 説明 例
show ポップオーバーを表示します。 myPopover.show()
hide ポップオーバーを非表示にします。 myPopover.hide()
toggle ポップオーバーの表示状態を切り替えます。 myPopover.toggle()
dispose ポップオーバーを破棄します。 myPopover.dispose()
enable ポップオーバーを有効にします。 myPopover.enable()
disable ポップオーバーを無効にします。 myPopover.disable()
toggleEnabled ポップオーバーの有効状態を切り替えます。 myPopover.toggleEnabled()
update ポップオーバーの位置と内容を更新します。 myPopover.update()

よくある質問

  1. Q: ポップオーバーの内容に HTML コードを含めることはできますか？
    A: はい、html オプションを true に設定することで、ポップオーバーの内容に HTML コードを含めることができます。
  2. Q: ポップオーバーの表示位置を変更するにはどうすればよいですか？
    A: placement オプションを使用して、ポップオーバーの表示位置を変更できます。使用可能な値は、'top'、'bottom'、'left'、'right' です。
  3. Q: ポップオーバーの表示をトリガーするイベントを変更するにはどうすればよいですか？
    A: trigger オプションを使用して、ポップオーバーの表示をトリガーするイベントを変更できます。使用可能な値は、'click'、'hover'、'focus'、'manual' です。