Popover API が Baseline に移行

Una Kravets

まもなく実施されます。私が最も期待している機能の 1 つが、すべてのモダン ブラウザにリリースされ、正式にベースライン 2024 の一部になりました。この機能が Popover API です。ポップオーバーには、ツールチップ、メニュー、チュートリアル UI などのレイヤ化されたインターフェースを構築するための優れたプリミティブとデベロッパー アフォーダンスが多数用意されています。

ポップオーバーの機能のハイライトをいくつかご紹介します。

• 最上位レイヤへの昇格。ポップオーバーはページの他の部分の上にある最上位レイヤに表示されるため、z-index を操作する必要はありません。
• ライトを消す機能。ポップオーバー領域の外側をクリックすると、ポップオーバーが閉じてフォーカスが戻ります。
• デフォルトのフォーカス管理。ポップオーバーを開くと、次のタブストップがポップオーバー内に表示されます。
• ユーザー補助対応のキーボード バインド。esc キーを押すか、ダブルタップするとポップオーバーが閉じてフォーカスが戻ります。
• アクセス可能なコンポーネント バインディング。ポップオーバー要素をポップオーバー トリガーに意味的に接続する。

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

ポップオーバーの作成は非常に簡単です。デフォルト値を使用するには、ポップオーバーをトリガーする 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="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 には、プラットフォームに導入される魅力的な機能が多数あります。この API の詳細（この機能のユーザー補助機能、機能セットに関するドキュメントなど）については、以下の記事もご覧ください。

• セマンティクスとポップオーバー属性: 何をいつ使うか? by Hidde de Vries
• ポップオーバーのユーザー補助: ブラウザでできることとできないこと（Hidde de Vries 著）
• ポップオーバーに関する MDN のドキュメント