HTML Popover APIは、補助メニューや説明パネルをtop layerへ表示し、外側クリックやEscキーで閉じる動作をブラウザへ任せられる仕組みです。非モーダルUIに向き、基本形ならJavaScriptなしでも開閉できます。
情報確認日：2026年8月20日
結論：非モーダルはpopover、操作を止めるならdialog
選び方
- 補助メニュー、共有パネル、追加説明：
popover - 確認画面、入力完了まで背景操作を止める：モーダル
dialog - 常に読めるべき重要情報：通常のHTML
- ボタン近くへの精密配置：CSS Anchor Positioningを併用
Popover APIの開閉を試す
WORKING DEMO
外側クリックとEscキーで閉じる非モーダルパネル
開いたあとも背景ページは操作できます。パネル外をクリックするかEscキーを押してlight dismissを確認してください。
ページを共有
このパネルはtop layerへ表示され、親要素のoverflowに切られにくくなります。
JavaScriptなしの最小HTML
<button type="button" popovertarget="share-panel">
共有メニューを開く
</button>
<div id="share-panel" popover>
<p>共有方法を選んでください。</p>
</div>popovertargetは対象のidを参照します。popoverに値を省略した場合はautoとして扱われ、通常は別のauto popoverを開くと既存のものが閉じ、外側クリックでも閉じられます。
popoverの3つの状態
| 値 | 主な挙動 | 用途 |
|---|---|---|
auto |
light dismissあり。通常は同時表示を管理 | メニュー、補助パネル |
hint |
ヒント向けの軽量な表示関係 | 一時的なヒント |
manual |
明示的に閉じるまで残す | 複数表示、独自制御 |
「閉じ忘れても困らない補助UI」ならautoから始めます。manualを使う場合は、必ず見つけやすい閉じる操作と状態管理を用意します。
JavaScriptで制御する
const panel = document.querySelector('#share-panel');
panel.showPopover();
panel.hidePopover();
panel.togglePopover();
panel.addEventListener('toggle', (event) => {
console.log(event.newState); // "open" または "closed"
});データ取得後に開く、閉じた時に状態を戻す、といった処理ではJavaScript APIを使います。対応確認は'showPopover' in HTMLElement.prototypeで行い、未対応時は通常領域へ内容を表示するなどの代替を用意します。
top layerで解決できること
Popoverは表示中にtop layerへ置かれます。カードのoverflow: hiddenでメニューが切れる、z-indexを増やしても別のstacking contextを越えられない、といった問題を避けやすくなります。ただし、top layerはボタン近くへの位置決めを自動で完成させません。位置はCSS Anchor Positioningや通常のCSSで設計します。
アクセシビリティで確認すること
- 操作には意味のないdivではなくbuttonを使う
- 開いた内容の見出しや目的を明確にする
- キーボードだけで開閉し、必要な項目へ移動できる
- 色だけで開閉状態や選択状態を伝えない
- モーダル相当の制約が必要ならpopoverで代用しない
Popover APIは表示状態を助けますが、メニュー、リストボックス、ツールチップなど各UIのキーボード操作まで自動実装するわけではありません。UIの役割に応じたHTMLと操作モデルが必要です。
dialogとの違い
| 比較 | Popover | Modal dialog |
|---|---|---|
| 背景操作 | できる | 閉じるまで制限 |
| 外側クリック | autoなら標準で閉じる | 設計して実装 |
| 主用途 | 補助情報・メニュー | 確認・入力フロー |
| top layer | 表示中に使う | showModal()で使う |
よくある失敗と解決策
重要な説明をpopoverだけへ隠す
利用規約、エラーの解決方法、購入条件など必読情報は通常の本文にも置きます。popoverは補助説明に留めます。
モーダルをpopoverで作る
背景操作を止め、フォーカスを閉じ込める必要があるならdialog.showModal()を選びます。見た目が似ていても動作要件で判断します。
未対応時にボタンだけ残る
@supports selector(:popover-open)やJavaScriptの機能検出を使い、未対応環境ではdetails要素や通常表示へ切り替えます。
よくある質問
外側クリック処理を書く必要はありますか？
popover="auto"ならlight dismissが標準動作です。manualでは独自の閉じる処理が必要です。
メニューへrole=”menu”を付ければ完成しますか？
いいえ。menuロールには矢印キーなど固有の操作期待があります。通常のリンク一覧なら、無理にmenuロールを付けない方が分かりやすい場合があります。
CSSだけで開閉状態を装飾できますか？
表示中の要素は:popover-openで選べます。開く・閉じる遷移は@starting-styleや離散プロパティのtransitionと組み合わせます。
まとめ
Popover APIは、非モーダルな補助UIをtop layerへ出し、標準の開閉動作を利用する仕組みです。まずpopoverとpopovertargetの宣言的な形から始め、モーダル要件ならdialogへ切り替えてください。表示内容の意味とキーボード操作は別途設計します。