ツールチップ

Tooltip

別名: 吹き出し、ツールチップテキスト

生態(さわってみる)

一言定義

要素にホバーまたはフォーカスすると近くに現れる、短い補足説明の小さな吹き出し。

分類

使う場面

  • アイコンボタンなど、ラベルだけでは意味が伝わりにくい要素に一言添えたいとき
  • 操作を妨げたくない、あくまで補助的な短文の説明であるとき

避ける場面

  • リンクやボタンなど操作要素を含むリッチな内容を出したいとき(→ポップオーバー)
  • タッチ操作が主のデバイスで、ホバーが存在しない環境が前提のとき

近縁種との比較

ポップオーバーとは「ホバーで出る短文か、クリックで開くリッチな内容か」という起動条件と内容量で 区別される。ツールチップはテキストのみで操作要素を含まないのが原則で、リンクやボタンを内部に 置きたくなった時点でポップオーバーへの切り替えを検討すべきである。ホバーだけに依存すると キーボード利用者やタッチデバイスの利用者に情報が届かないため、フォーカスでも同様に表示させる 実装が必須になる。

実例リンク

アクセシビリティ

role
role="tooltip" を持つ要素を、トリガー要素の aria-describedby で参照する
キーボード操作
キーボードフォーカスでも表示されなければならない(ホバー専用は不可)。Escで閉じる
補足
ホバー・短文ならツールチップ、クリックで開きリッチな内容を持たせるならポップオーバーという使い分けが研究ノートの同義語表にある定番論点