クリックで開くインフォポップオーバー
アイコンクリックで横に小窓が開くインフォポップオーバー。Tooltip より長文・複数行向け。設定 UI・補足説明に頻出。
解説
クリックで開くインフォポップオーバーは、丸い ⓘ ボタンを押すと、その脇に説明文を表示する UI 部品です。transition の付いた .po__pop を、JavaScript で is-on クラスを付け外しして表示・非表示を切り替えています。短い注釈で済む Tooltip と違い、見出しと段落を含む 複数行の長めの説明を載せられるのが特徴です。
使う場面
- パスワードの条件など、入力欄のそばに置く補足説明
- 料金表やプラン名の横に置く「この項目とは」の解説
- 設定画面で、スイッチの意味を補う案内
外側をクリックすると閉じる処理が入っているため、開きっぱなしになりません。色は .po__btn の background、表示位置は .po__pop の top や left で調整できます。スマートフォンでは画面端からはみ出しやすいので、横位置の値を見直すと安全です。アクセシビリティを高めるなら、ボタンに aria-expanded を付けて開閉状態を伝えるとよいでしょう。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
Tooltip との違いは何ですか
Tooltipはホバーで短い注釈を出す用途、こちらはクリックで開き、見出しや段落を含む長めの説明を載せる用途です。読ませたい情報量が多いときはこのポップオーバーが向きます。
JavaScript は必須ですか
このサンプルは開閉と外側クリックで閉じる処理にJavaScriptを使っています。CSSだけで開閉したい場合はチェックボックスやdetails要素で代替できますが、外側クリックで閉じる挙動はJavaScriptが必要です。