ポップオーバー
Popover
別名: ポップオーバーパネル、トグルチップ、ポップアップ、Popover、Toggletip
生態（さわってみる）
「ツールチップ」のホバー短文デモとは異なり、クリックで開き、見出し・本文・リンク・ボタンを含むリッチな内容を持つのがポップオーバーです。
一言定義
要素をクリックすると近くに現れる、リンクやボタンなど操作要素を含められるリッチな内容の小型フロート面。
分類
使う場面
- ボタンやリンクなど、追加の操作をその場で提示したいとき
- 短文では足りない、見出し+本文+リンクのような複数要素からなる補足情報を出したいとき
避ける場面
- ホバーだけで一言添えれば十分なとき（→ツールチップ）
- 背面全体を止めてでも完了させたい独立したタスクがあるとき（→モーダル）
近縁種との比較
ツールチップとは「ホバーで出る短文か、クリックで開くリッチな内容か」という起動条件と内容量で区別される。ポップオーバーはリンクやボタンなどの操作要素を内部に持てる点が特徴で、テキストのみで完結するツールチップとはフォーカス管理の要件も異なり、開いた瞬間に内部へフォーカスを移し、Escや外側クリックで明示的に閉じる制御が必要になる。IBM Carbonが「Toggletip」と呼ぶものは、クリックで開閉する点でツールチップよりポップオーバーに近い実装だが、内容を短文の説明に絞る点で狭義のポップオーバーの一種として扱われることが多く、本図鑑ではToggletipをポップオーバーの別称（Carbon用語）としてエイリアスに含めている。
近縁種
実例リンク
アクセシビリティ
- role
- 内容がテキストのみの短い補足ならrole="tooltip"で足りるCarbonのToggletipのような実装もあるが、リンクやボタンなど操作要素を含む場合はrole="dialog"（非モーダル）としてフォーカスを内部に移すのが安全。本デモは操作要素を含むためrole="dialog"を採用する
- キーボード操作
- トリガーをEnter/Spaceで開閉。開いたらポップオーバー内へフォーカスを移動し、Escで閉じてトリガーへフォーカスを戻す。ポップオーバー外のクリックでも閉じる
- 補足
- ツールチップとの混同を避けるため、ホバーでは開かずクリック/Enterでのみ開閉する設計を徹底する