Design Pattern

ポップオーバー

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

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

いつ使う / 使わない

使うべきとき

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

使わないべきとき

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

構造（Anatomy）

1 トリガーボタン（popovertarget で対象を指定）
2 ポップオーバー本体（popover 属性を持つ要素）
3 コンテンツ領域（テキスト、メニュー、フォームなど）
4 アクションボタン（閉じる、確定など）
  1. トリガー — popovertarget で表示対象を関連付ける
  2. ポップオーバー本体 — popover または popover="manual" を付ける
  3. コンテンツ領域 — メニューや説明文など用途に応じた内容を置く
  4. アクション — 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 をスタイリングする

アクセシビリティ

WCAG 2.1.1 キーボード

キーボードで開閉でき、内部コンテンツへ到達でき、閉じる手段も必要です。

WCAG 4.1.2 名前・役割・値

開閉状態と対象の関係が支援技術に分かるよう、構造とラベルを整理します。

WCAG 2.4.3 フォーカス順序

開いたときも閉じたときも、フォーカスの移動先が自然であることが重要です。

キーボード操作

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

ライブデモ

基本ポップオーバー

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

プレビュー全画面表示

メニューポップオーバー

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

プレビュー全画面表示

確認ポップオーバー

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

プレビュー全画面表示

よくある間違い

配置を全部 JavaScript で持つ

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

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

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

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

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

auto と manual を使い分けない

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