Design Pattern

ポップオーバー

ポップオーバーは、トリガー要素の近くに補助コンテンツを表示する UI パターンです。Popover API と CSS Anchor Positioning を使うと、表示制御や配置をネイティブに扱えます。

難易度: 中級カテゴリ: オーバーレイ

いつ使う / 使わない

使うべきとき

ドロップダウンメニューやアクションメニューを表示したい場合
確認前の軽量な補助 UI を表示したい場合
ヘルプやプレビューなど追加情報をコンパクトに出したい場合

使わないべきとき

短い補足テキストだけなら → ツールチップを使う
ユーザーの注意を完全に引く必要があるなら → モーダルダイアログを使う
常時表示すべき重要情報なら → インライン表示する

構造（Anatomy）

1 トリガーボタン（popovertarget で対象を指定）

2 ポップオーバー本体（popover 属性を持つ要素）

3 コンテンツ領域（テキスト、メニュー、フォームなど）

4 アクションボタン（閉じる、確定など）

トリガー — popovertarget で表示対象を関連付ける
ポップオーバー本体 — popover または popover="manual" を付ける
コンテンツ領域 — メニューや説明文など用途に応じた内容を置く
アクション — manual モードでは閉じる手段や確定操作を明示する

HTML 構造

Popover API の基本

auto モード — 外側クリックや Escape で自動的に閉じる
manual モード — 明示的な操作でのみ閉じる。確認 UI に向く

重要なポイント

トリガーには popovertarget を設定する
popovertargetaction で show / hide / toggle を制御できる
トップレイヤーに表示されるため、z-index 問題を避けやすい
開いたときのフォーカス移動先を用途に応じて設計する

CSS 実装

CSS Anchor Positioning

トリガーに anchor-name を設定してアンカー化する
ポップオーバーに position-anchor を付けて参照先を指定する
anchor() 関数で top / left を相対配置する
必要なら inset を解除して配置を明示する

スタイル設計

ボーダーとシャドウで浮遊感を出す
max-width を制御して読みやすい幅に収める
必要に応じて auto モードの backdrop をスタイリングする

キーボード操作

Enter / Space でトリガーを押して開閉
Escape で auto モードのポップオーバーを閉じる
Tab で内部のフォーカス可能要素を移動

ライブデモ

基本ポップオーバー

auto モードを使った基本実装です。

メニューポップオーバー

アクションメニューとして使うパターンです。

確認ポップオーバー

manual モードで明示的に閉じる確認 UI です。

よくある間違い

配置を全部 JavaScript で持つ

Anchor Positioning で足りる場面でもライブラリ前提にすると、実装が重くなります。

キーボード操作を考慮しない

表示できても中に入れないポップオーバーは、メニューや確認 UI として成立しません。

開いた直後にフォーカスできない

manual モードでは特に、最初の操作先を決めておかないとキーボード利用者が迷います。

auto と manual を使い分けない

確認 UI に auto を使うなど、閉じ方が文脈に合っていないと誤操作が増えます。