ツールチップ
Tooltip
別名: 吹き出し、ツールチップテキスト
生態(さわってみる)
詳細設定を開く
一言定義
要素にホバーまたはフォーカスすると近くに現れる、短い補足説明の小さな吹き出し。
分類
使う場面
- アイコンボタンなど、ラベルだけでは意味が伝わりにくい要素に一言添えたいとき
- 操作を妨げたくない、あくまで補助的な短文の説明であるとき
避ける場面
- リンクやボタンなど操作要素を含むリッチな内容を出したいとき(→ポップオーバー)
- タッチ操作が主のデバイスで、ホバーが存在しない環境が前提のとき
近縁種との比較
ポップオーバーとは「ホバーで出る短文か、クリックで開くリッチな内容か」という起動条件と内容量で 区別される。ツールチップはテキストのみで操作要素を含まないのが原則で、リンクやボタンを内部に 置きたくなった時点でポップオーバーへの切り替えを検討すべきである。ホバーだけに依存すると キーボード利用者やタッチデバイスの利用者に情報が届かないため、フォーカスでも同様に表示させる 実装が必須になる。
実例リンク
アクセシビリティ
- role
- role="tooltip" を持つ要素を、トリガー要素の aria-describedby で参照する
- キーボード操作
- キーボードフォーカスでも表示されなければならない(ホバー専用は不可)。Escで閉じる
- 補足
- ホバー・短文ならツールチップ、クリックで開きリッチな内容を持たせるならポップオーバーという使い分けが研究ノートの同義語表にある定番論点