吹き出し
Tooltip要素にホバーまたはフォーカスすると近くに現れる、短い補足説明の小さな吹き出し。
ボタンにマウスを載せる（またはフォーカスする）と、短い補足が現れます
詳細設定を開く○ 使う場面
- アイコンボタンなど、ラベルだけでは意味が伝わりにくい要素に一言添えたいとき
- 操作を妨げたくない、あくまで補助的な短文の説明であるとき
× 避ける場面
- リンクやボタンなど操作要素を含むリッチな内容を出したいとき（→ポップオーバー）
- タッチ操作が主のデバイスで、ホバーが存在しない環境が前提のとき
別名
ツールチップ、ツールチップテキスト
近縁種との比較
「吹き出し」という日本語の呼び名は、漫画でキャラクターのセリフを囲む吹き出し（スピーチバブル）に由来するとされる。吹き出しはテキストのみで操作要素を含まないのが原則で、リンクやボタンを内部に置きたくなった 時点でポップオーバーへの切り替えを検討すべきである。ホバーだけに依存するとキーボード利用者や タッチデバイスの利用者に情報が届かないため、フォーカスでも同様に表示させる実装が必須になる。
| 近縁種 | 違い・使い分け |
|---|---|
| ポップオーバー | ホバーで出る短文ならこのUI（吹き出し）、クリックで開きリンクやボタンなど操作要素を含むリッチな内容を持たせたいならポップオーバーに切り替える。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション