UI Component Lab English

← コンポーネント一覧

オーバーレイ

Popover ポップオーバー

ボタンの近くに開き、外側をクリックすると閉じる小さなパネル。

別名

見分けるポイント

枠線と影のある小さなカードが、開いたボタンのすぐ隣に出る。見出し・文章・ボタンを入れられる。

挙動

  • ボタンを押すと開き、もう一度押すと閉じる。
  • 外側をクリックするか Esc を押すと閉じる（ライトディスミス）。
  • モーダルと違い、開いている間もページの他の部分を操作できる。
  • このデモは HTML の popover 属性を使っている。CSS のアンカー配置に対応していないブラウザでは、画面の中央に出る。

キーボード操作

キー動作
Enter / Spaceポップオーバーを開閉する。
Tabボタンから、ポップオーバーの中身へ移動する。
Escポップオーバーを閉じ、ボタンにフォーカスを戻す。
  • ツールチップ: ポップオーバーはクリックで開いてボタンも入れられ、ツールチップはホバーやフォーカスで出て文字だけを持つ。
  • モーダルダイアログ: ポップオーバーは開いたままページを操作でき、外側のクリックで閉じる。モーダルは閉じるまでページを操作できない。

出典