ポップオーバー
Popover要素をクリックすると近くに現れる、リンクやボタンなど操作要素を含められるリッチな内容の小型フロート面。
「ツールチップ」のホバー短文デモとは異なり、クリックで開き、見出し・本文・リンク・ボタンを含むリッチな内容を持つのがポップオーバーです。
○ 使う場面
- ボタンやリンクなど、追加の操作をその場で提示したいとき
- 短文では足りない、見出し+本文+リンクのような複数要素からなる補足情報を出したいとき
× 避ける場面
- ホバーだけで一言添えれば十分なとき（→吹き出し）
- 背面全体を止めてでも完了させたい独立したタスクがあるとき（→モーダル）
別名
ポップオーバーパネル、トグルチップ、ポップアップ
近縁種との比較
開いた瞬間に内部へフォーカスを移し、Escや外側クリックで明示的に閉じる制御が必要になる。IBM Carbonが「Toggletip」と呼ぶものは、クリックで開閉する点で吹き出しよりポップオーバーに近い実装だが、内容を短文の説明に絞る点で狭義のポップオーバーの一種として扱われることが多く、本図鑑ではToggletipをポップオーバーの別称（Carbon用語）としてエイリアスに含めている。ポップオーバーには吹き出しのように、どの要素から出た内容かを示す三角形の矢羽根（ポインタ）を付けるのが伝統的な作法で、これによりポップアップよりもアンカーとの結びつきが視覚的に明確になる。
| 近縁種 | 違い・使い分け |
|---|---|
| 吹き出し | 吹き出しとは「ホバーで出る短文か、クリックで開くリッチな内容か」という起動条件と内容量で区別される。ポップオーバーはリンクやボタンなどの操作要素を内部に持てる点が特徴で、テキストのみで完結する吹き出しとはフォーカス管理の要件も異なる。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション