ツールチップ

定義

ツールチップは、ある要素にマウスを乗せたりキーボードでフォーカスしたときに、そのすぐ横へ 一瞬だけ現れるごく短い説明です。とくに文字ラベルのないアイコンだけのボタンのように、 ぱっと見て意味がわかりにくい要素を補うのに使います。たとえば歯車のアイコンに「設定」という ツールチップを添えれば、絵だけを見て迷うことがなくなります。トリガーとなる要素の上・下・左・右の どこにでも置けて、画面の端にぶつからない向きへ自動で位置を調整するのが一般的です。サイズは小さく、 表示される時間もユーザーがその要素にとどまっている間だけと短いので、画面の流れをほとんど 邪魔しないのが特徴です。

なぜ重要か

ツールチップは、画面をごちゃつかせずに、必要な人にだけ情報を届ける静かな案内役です。 すべてのアイコンの横に文字説明を並べると画面はすぐ窮屈になりますが、ツールチップはふだんは 隠れていて、ユーザーが気になったときだけ現れるので場所を節約できます。おかげでツールバーや 狭い画面でもすっきりした見た目を保ちながら、各ボタンの意味をしっかり伝えられます。ただし ツールチップはあくまで「あると助かる」補助であることが大切です。ツールチップを見ないと次の 操作がわからない作りにすると、それが出ない状況でユーザーは迷子になります。マウスを使わない人や 画面を音で聞く人には、この問題がいっそう大きく響きます。だからツールチップは理解を助けるおまけで あって、大事な情報を隠しておく金庫ではない、という感覚を持って使いましょう。この原則さえ守れば、 ツールチップは画面を軽く保つとても頼もしい味方になります。

よくある間違い

• タッチ端末にはマウスのホバーがないことを忘れてしまうケースです。スマホのユーザーは要素に カーソルを乗せる手段がなくツールチップをそもそも見られないので、大事な情報をツールチップだけに 入れると、その情報がまるごと消えてしまうことになります。
• ツールチップの中に段落ほどの長い文章や、ボタン・リンクといった操作要素を入れてしまうことです。 ツールチップは一行の説明のための場所なので、内容が長かったりクリックが必要なら、ポップオーバーや 本文中のヘルプへ移したほうが適切です。
• カーソルを乗せた瞬間にすぐ出て、少し外れただけで消えるように作ってしまうことです。遅延なしで 反応すると、カーソルが通り過ぎただけでツールチップがちらついて、かえって注意を乱してしまいます。

実務のヒント

• 大事な情報は決してツールチップだけに頼らないでください。ツールチップの中身は一行で短く保ち、 長くなりそうならポップオーバーや、画面につねに見えているヘルプテキストへ移すほうが安全です。
• マウスのホバーだけでなく、キーボードのフォーカスでもツールチップが出るようにしましょう。 キーボードだけを使う人やスクリーンリーダーの利用者も同じ説明を受け取れて、アクセシビリティが 大きく向上します。
• 現れるときにごく短い遅延を入れて、カーソルが一瞬かすめただけでは出ず、とどまったときだけ出る ようにしましょう。この小さな時間差ひとつで、画面がずっと落ち着いた印象になります。

関連概念