Popover API ネイティブ ポップオーバー
popover 属性 + popovertarget 属性だけで実装できる HTML 標準のポップオーバー UI。Escape キー閉じ・トップレイヤー描画・backdrop 装飾まで無料。
解説
Popover API ネイティブ ポップオーバーは、UI コンポーネントカテゴリの「popover」に分類される実装パターンです。CSS のみで構成され、難易度はシンプルレベル。
Popover API（2023〜2024 年に主要ブラウザで対応）は、HTML 標準だけでポップオーバー UI を実現する仕組みです。これまで「Tippy.js」「Popper.js」のような JavaScript ライブラリで実装していた処理が、popover 属性と popovertarget 属性を付けるだけで動きます。
このサンプルでは、メニューボタンをクリックすると小さなメニューパネルがふわっと開く実装をしています。JavaScript ゼロで、Escape キーで閉じる・外側クリックで閉じる・トップレイヤー描画（z-index 影響なし）まですべて自動で動作します。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
注意点 / カスタマイズ時のポイント
Chrome / Edge 114+、Safari 17+、Firefox 125+ で対応（2026 年時点）。古いブラウザ向けには Popover Polyfill（oddbird/popover-polyfill）を併用すると安全です。
位置決め（アンカーポジショニング）は別 API。position-anchor や Anchor Positioning API と組み合わせると、ボタンから精密に位置調整できます。
よくある質問
アンカーポジショニングと組み合わせるには？
position-anchor + position-area を使うと、トリガー要素を基準にポップオーバーの位置を精密に指定できます。Anchor Positioning API は別途学習が必要です。manual mode と auto mode の違いは？
popover="manual" に変更すると、明示的に hidePopover() を呼ばない限り閉じません。