Popover API が Baseline に移行

Una Kravets

まもなく実施されます。特に期待している機能の一つが最新のブラウザに導入され、Baseline 2024 に正式に組み込まれました。この機能は Popover API です。Popover は、ツールチップ、メニュー、教育 UI など、階層化されたインターフェースを構築するための多くの優れたプリミティブとデベロッパー アフォーダンスを提供します。

対応ブラウザ

  • 114
  • 114
  • 125
  • 17

ソース

ポップオーバー機能の概要は次のとおりです。

  • 最上位レイヤへのプロモーション。ポップオーバーは、ページの他の部分より上の最上位レイヤに表示されるため、z-index をいじる必要はありません。
  • ライトを閉じる機能。ポップオーバー領域の外側をクリックすると、ポップオーバーが閉じてフォーカスが戻ります。
  • デフォルトのフォーカス管理。ポップオーバーを開くと、次のタブ停止がポップオーバー内にあります。
  • ユーザー補助機能のキーボード バインディング。esc キーを押すか、2 回切り替えると、ポップオーバーが閉じてフォーカスが戻ります。
  • ユーザー補助コンポーネント バインディング。ポップオーバー要素を意味的にポップオーバー トリガーに接続する。

ポップオーバーを作成する

ポップオーバーは簡単に作成できます。デフォルト値を使用するには、ポップオーバーをトリガーする button とトリガーする要素のみが必要です。

  • まず、ポップオーバーになる要素に popover 属性を設定します。
  • 次に、ポップオーバー要素に一意の id を追加します。
  • 最後に、ボタンをポップオーバーに接続するには、ボタンの popovertarget をポップオーバー要素の id の値に設定します。

次のコードに、この例を示します。

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
popover 属性の基本的な使用例

ポップオーバーをより細かく制御するには、ポップオーバーのタイプを明示的に設定します。たとえば、値を指定せずに popover 属性を使用することは popover="auto" と同じです。auto 値を指定すると、ライト非表示の動作が有効になり、他のポップオーバーが自動的に閉じます。popover="manual" を使用し、閉じるボタンを追加する必要があります。手動ポップオーバーによって他のポップオーバーが閉じられることはありません。また、ユーザーが UI 内でクリックしてポップオーバーを閉じることもできません。手動ポップオーバーを作成するには、次のコマンドを使用します。

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
手動ポップオーバーの例

ポップオーバーとモーダル ダイアログ

ダイアログが存在する場合にポップオーバーが必要かどうか疑問に思うかもしれませんが、答えは「必要ではないかもしれません」です。

注意すべき点として、popover 属性自体はセマンティクスを提供していません。また、ポップオーバーを使用してモーダル ダイアログのようなエクスペリエンスを構築できるようになりましたが、両者にはいくつかの重要な違いがあります。

モーダル <dialog> 要素

  • dialog.showModal() で開きました。
  • dialog.close() で終了。
  • ページの残りの部分を不活性化します。
  • ライトを閉じる動作はサポートされていません。
  • [open] 属性を使用して、開いた状態のスタイルを設定できます。
  • ページの他の部分の操作をブロックするインタラクティブ コンポーネントを意味的に表します。

[popover] 属性

  • 宣言型の起動元（popovertarget）で開くことができます。
  • popovertarget（自動ポップオーバー）または popovertargetaction=hide（手動ポップオーバー）で閉じます。
  • ページの他の部分が不活性にならないようにします。
  • ライトを閉じる動作をサポートします。
  • :popover-open 疑似クラスを使用して、開いた状態のスタイルを設定できます。
  • 固有のセマンティクスはありません。

結論と参考資料

popover には、プラットフォームにもたらす優れた機能が数多くあります。機能のユーザー補助機能の詳細や、機能セットに関するドキュメントなど、この API の詳細については、以下のドキュメントをお読みください。