【つーるちっぷ】
ツールチップ とは？
💡 そっと寄り添う、画面の中の小さなささやき
📌 このページのポイント
- マウスカーソルを要素に重ねると自動で表示される小さな説明テキスト
- ボタンやアイコンの意味をユーザーに伝える定番のUIパターン
- HTML標準のtitle属性で簡単に実装でき、CSSやJavaScriptでカスタマイズも可能
- 表示しすぎるとかえって邪魔になるため、本当に必要な場面に絞って使うのがコツ
ひよこ ツールチップってどこで見かけるの？
ペンギン先生 たとえばWebサイトのアイコンにマウスカーソルを合わせると「設定」「検索」みたいな小さい説明文がふわっと出てくるよね。あれがツールチップだよ。スマホだと長押しで出ることもあるね
ひよこ どうやって作るの？難しそう…
ペンギン先生 一番簡単なのはHTMLのtitle属性だよ。たとえばボタンにtitle="保存する"と書くだけで、マウスを乗せたときにテキストが表示されるんだ。ただしデザインはブラウザ任せになるから、見た目にこだわるならCSSやJavaScriptでカスタムするのが一般的だね
ひよこ どんな場面で使うのが正解なの？
ペンギン先生 アイコンだけのボタンに名前を付けたり、入力フォームで記入例を示したり、略語の正式名を表示したりするのが定番だよ。逆に、長い文章をツールチップに入れたり、重要な操作説明をツールチップだけに頼ったりするのはNGだね
ひよこ スマホだとマウスがないけど、どうなるの？
まとめ：ざっくりこれだけ覚えればOK！
「ツールチップ」って出てきたら「マウスを乗せると出てくるちょっとした説明文」と思えればだいたいOK！
📖 おまけ：英語の意味
「Tooltip」 ＝ 道具のヒント
💬 Tool（道具）のTip（ヒント・助言）で、ツールバーのボタンにマウスを乗せると名前が出る機能が由来だよ。道具の使い方をそっと教えてくれる存在だよ