ツールチップ（tooltip）とは、画面の部品に付ける、短い説明である。マウスを重ねたときや、キーボードで項目を選んだままにしたときに現れる。アイコンやボタンなどに付けて使う。
たとえば、検索欄の横に、カメラのアイコンがあるとする。アイコンだけでは、何ができるのか分からない。マウスを重ねると、「画像で検索」と小さく出る。この表示が、ツールチップである。
どんなものか
ニールセン・ノーマン・グループ（NN/g）の記事「Tooltip Guidelines」（2019年）が、ツールチップの特徴を説明している。
- 利用者が操作したときにだけ出る。新機能を知らせるために、自動で出る案内は、ツールチップではない。
- 付けた部品の説明にとどまる。作業全体の流れは、説明しない。
- マウスやキーボードで使う。タッチ画面では、ふつう使えない。
タッチ画面では、代わりに、ポップアップの案内（popup tip）を使う。「?」や「i」のアイコンをタップすると出る。
守りたい5つの指針
- 作業に欠かせない情報は、入れない。ツールチップは、消える。だから、パスワードの条件のような、すぐ使う情報は、画面に出し続ける。入れてよいのは、なじみのない入力欄の補足や、変わった入力を求める理由である。たとえば、配送先のメール欄に、「発送の連絡に使います」と添える。
- 短くて、役に立つ内容にする。ボタンの名前を、そのままくり返しても、意味がない。役に立つことが思いつかなければ、付けない。
- マウスとキーボードの両方で出す。マウスだけだと、キーボードで操作する人には、見えない。
- 近くに部品が並ぶときは、矢印を付ける。どの部品の説明か、分かる。
- サイト全体で、同じように付ける。ツールチップは、目印がなく、見つけにくい。付いたり付かなかったりすると、気づいてもらえない。一部だけに必要なら、ポップアップの案内にする。
ほかに気をつけること
- ラベルのないアイコンには、せめてツールチップを付ける。ただし、アイコンには、文字のラベルを付けるのが、先である。
- 背景との色の差を、適度にする。薄い灰色の文字は、読みにくい。
- 説明している部品や、関係する内容に、かぶせない。かぶさると、利用者は、マウスを動かして消し、もう一度読み、また重ねる、という操作をくり返すことになる。
ツールチップが必要になる場面の多くは、アイコンにラベルを付けるなど、基本を守れば、なくせる。迷ったら、こう考える。その情報がなければ、作業を終えられないか。終えられないなら、ツールチップではなく、画面に出す。
