ツールチップ
Tooltip
概要（サマリー）
ツールチップとは、要素へポインターを重ねたりフォーカスしたりしたときに、短い補足説明を表示するUI部品である。意味がわかりにくいアイコンのそばへ、一時的に小さな説明札を出すイメージである。
以下は、ボタンにマウスを重ねるかフォーカスすると補足説明が表示される簡単なデモである。
ボタンにマウスを重ねるか、フォーカスしてください
詳細解説
短い補足を表示する
アイコンの意味、略語の説明、操作のヒントなど、本文へ常時置くほどではない短い情報に向く。重要な手順やエラー内容をツールチップだけへ入れるべきではない。
ホバーだけに依存しない
マウスのホバーに加えて、キーボードのフォーカスでも表示する必要がある。タッチ画面ではホバーがないため、タップや常時表示など別の到達方法も検討する。
関連する要素と結び付ける
説明対象とツールチップの関係を支援技術へ伝えるには、適切なHTMLとARIA属性を使う。アクセシビリティを保つには、表示するだけでなく読み上げられる関係を作ることが重要である。
<button aria-describedby="save-help">保存</button>
<span id="save-help" role="tooltip">変更内容を保存する</span>
実際の表示制御では、フォーカスやポインターのイベント、またはCSSを用途に応じて組み合わせる。
ホバーやクリックで補足説明を吹き出し表示する実装は、次のページで動きとコードを確認できる。
閉じられる設計にする
表示したツールチップが内容を隠す場合、Escapeキーなどで閉じられる必要がある。ポインターをツールチップ上へ移しても消えず、中の文字を読めることも大切である。
長文や操作部品には向かない
ツールチップは短い説明向けである。リンク、ボタン、フォームなどを含む複雑な内容には、ポップオーバーやダイアログなど別のUIが適している。
AIコーディングとの関係
AIには「ホバーだけでなくフォーカスでも表示する」「アイコンと説明の関係をaria-describedbyで伝える」のように、表示条件と支援技術への配慮を明示するとよい。生成されたコードでは、Escapeキーで閉じられるか、タッチ端末で情報へ到達できるかを確認する必要がある。
よくある勘違い
アイコンには必ずツールチップが必要？
明確な文字ラベルを常時表示できるなら、そのほうが理解しやすい場合が多い。
ホバーで表示すれば完成？
キーボード、タッチ、読み上げ、閉じる操作にも対応する必要がある。
ツールチップ内にボタンを置いてよい？
通常のツールチップは操作を含まない短い説明向けである。操作が必要なら別のUIを選ぶべきである。
まとめ
- ツールチップは一時的な短い補足説明である
- ホバーだけでなくフォーカスやタッチも考慮する
- 対象要素との関係を支援技術へ伝える
- 長文や操作を含む内容には別のUIを使う
情報ソース
- WAI-ARIA Authoring Practices Guide: Tooltip Pattern
- W3C WAI: Understanding Content on Hover or Focus
より詳しくAIに聞いてみよう
- ツールチップを初心者向けに説明してください。
- ツールチップとポップオーバーの違いを教えてください。
- ホバーだけに依存できない理由を整理してください。
- キーボード対応ツールチップを作ってください。
- このツールチップのアクセシビリティを確認してください。