Popover API

モーダルなどのポップオーバーを実装するために提供されているブラウザの仕様

SafariはSafari 17から対応される

以下の3つの属性が追加された

デフォルトで非表示になり，展開された場合はトップレイヤに表示される．

auto

開いたとき他のモーダルを閉じる

manual

<a>や<div>要素には設定できない

<div>をボタンとして実装してほしくないという想いにも応えている仕様

以下が最小の動作パターン

code:.html

<button type="button" popovertarget="p1">開閉ボタン</button>

<div popover id="p1">ポップオーバーUI</div>

JavaScriptが不要で動作するという点が魅力

JavaScriptで制御することもできる

可能な限りポップオーバーはそれをトリガーするDOMの直後に配置することでスクリーンリーダなどが論理的に読み取ることができる

ポップオーバーの中のautofocus属性を持つものに移動する

ポップオーバーが閉じられた場合はトリガー要素に戻る

<dialog>に対しては利用できない