Popover API

popover属性が解く問題：重なり順と開閉制御の自前実装

ツールチップやメニュー、通知トーストのようなUIは、長らく position: fixed と高い z-index の組み合わせで実装されてきました。しかし祖先に contain や transform がかかっていると新しい包含ブロックやスタッキングコンテキストが生まれ、z-index をいくら上げても親の重なり順に閉じ込められて期待通り最前面に出ません（スタッキングコンテキストの生成条件は スタッキングコンテキストとz-indexの解決順 を参照）。さらに「外側クリックで閉じる」「Escで閉じる」「開いたら中にフォーカスを移し、閉じたら元の要素に戻す」はすべてJSで手作りする必要があり、実装のたびに漏れが生じがちでした。

Popover API はこれをHTML属性1つで解決します。任意の要素に popover 属性を付けるだけで、その要素はトップレイヤーという特別な描画層に載る資格を得て、開閉・ライトディスマス・フォーカス管理をブラウザが標準で面倒みます。

<button popovertarget="menu">メニュー</button>
<div id="menu" popover>
  <p>ここがポップオーバーの中身</p>
</div>

popover 属性を持つ要素は、ユーザーエージェントスタイルシートで暗黙に display: none になっており、開かれるまで画面にもアクセシビリティツリーにも実質的な形では現れません。

トップレイヤーでの描画：DOM位置から解放される

要素が「開いた」状態になると、ブラウザはそれを通常のレンダリングツリーの位置から引き上げ、**トップレイヤー（top layer）**という文書ツリーの外側にある専用の描画層に配置します。トップレイヤーは <dialog> の showModal() で表示されるモーダルダイアログや全画面API（Fullscreen API）の要素と同じ場所で、常に文書内の他のどんなスタッキングコンテキストよりも上に描画される、という保証があります。

これが意味するのは、ポップオーバー要素がDOM上のどこに書かれていても——たとえ深くネストした overflow: hidden なコンテナの中にあっても——開いた瞬間にそのコンテナの制約から抜け出し、画面の最前面に描画されるということです。祖先の z-index や contain: layout paint によるクリッピングを気にする必要がありません。

popover 属性を持つ要素には :popover-open 擬似クラスが使え、開いている間だけスタイルを当てられます。加えてブラウザは開閉のたびに要素へフェードイン・フェードアウト用のデフォルトトランジション（display と overlay プロパティを含むトランジション遷移）を許すため、transition に display と overlay を加えるだけでネイティブな開閉アニメーションが書けます。

[popover] {
  opacity: 0;
  transition: opacity 0.2s, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}
[popover]:popover-open {
  opacity: 1;
}

宣言的な開閉制御：popovertarget

ポップオーバーを開閉する最も簡単な方法は、<button> や <input type="submit"> に popovertarget 属性でターゲットのidを指定することです。これだけでJSを1行も書かずにトグル動作が実装されます。

<button popovertarget="tip" popovertargetaction="show">表示</button>
<button popovertarget="tip" popovertargetaction="hide">非表示</button>
<div id="tip" popover>補足情報です。</div>

popovertargetaction を省略すると既定値は toggle で、押すたびに開閉が切り替わります。show / hide を明示すれば一方向の制御になります。JSから操作したい場合は要素自身が持つ showPopover() / hidePopover() / togglePopover() メソッドを直接呼べます。

モーダル/非モーダルの違い：popover=auto と manual

popover 属性の値は auto（既定値、空文字列や属性名のみの指定も同義）と manual の2種類です。ここでいう「モーダル」は <dialog> の showModal() が作る完全なモーダル（背景操作を完全に無効化し ::backdrop を持つ）とは異なる概念で、Popover APIの文脈では自動で閉じる（light-dismissする）かどうかが本質的な違いになります。

popover=auto の要素は、開くとポップオーバースタックという管理下に置かれます。新しいauto系ポップオーバーが開いたとき、それが既存の開いているポップオーバーの祖先や子孫でなければ、スタック上の関係ない要素は自動的に閉じられます。これにより「メニューを開いたら前のメニューが閉じる」という排他制御が、実装コード無しで実現されます。ライトディスマスの発火条件は、ポップオーバー本体の外側でのポインタ操作（pointerdown）と、Escape キー押下です。popover=manual はこの一連の自動処理を一切受けません。開いたままにしたい通知や、複数を同時表示したいUIに向きます。

フォーカス管理：自動フォーカスと復帰

popover=auto の要素が開くと、ブラウザは自動フォーカスを試みます。要素内に autofocus 属性を持つ子孫があればそこへ、無ければポップオーバー要素自身（フォーカス可能でなくても一時的にフォーカスターゲットになれる）へフォーカスを移します。閉じるときは、開く直前にフォーカスされていた要素へ自動的に戻ります。この「開く前の状態への復帰」は <dialog> の showModal() と共通する設計で、キーボード操作やスクリーンリーダー利用時に「メニューを開いて閉じたら、元いたボタンに戻っている」という直感的な体験を保証します。

ただし、Popover APIの非モーダル的な性質上、フォーカストラップ（Tabキーでポップオーバー外に出られないようにする閉じ込め）はデフォルトで行われません。<dialog> の showModal() はモーダル状態でTab移動をダイアログ内に閉じ込めますが、popover=auto は開いていてもTabで背景要素へフォーカスが移動できます。厳密なモーダル的閉じ込めが必要な場面（フォーム内の重要な確認ダイアログなど）は <dialog> を使うべきで、Popover APIは「背景操作をブロックしないライトウェイトな浮遊UI」に向いた設計だと理解しておく必要があります。

まとめ