【つーるちっぷ】
ツールチップ とは？
最終更新:
💡 ボタンのそばに現れる、小さな説明
ボタンなどにカーソルを重ねたり、キーボードでフォーカスしたりすると現れる短い補足表示。重要な説明を隠さず、入力方法の違いにも配慮して使うUIです。
📌 このページのポイント
- ボタンやアイコンの近くに短い補足を表示する
- ホバーだけでなく、キーボード操作でも読める設計にする
- title属性だけに重要な説明を任せない
- タッチ画面や読み上げも考え、必要な情報は見える形で示す
ひよこ どんな表示がツールチップなの？
ひよこ HTMLのtitle属性だけで作れる？
ペンギン先生 ブラウザがtitleの文字を小さく表示することはあるよ。ただしタッチ・キーボード・読み上げでの扱いには問題があるので、重要な説明をtitleだけに入れないようにしよう。ボタン自体にも分かる名前を付けたいね。
ひよこ 自作するときは、何に気をつける？
ペンギン先生 ひよこ スマホでは、どうするの？
ペンギン先生 ホバーできない操作環境もあるから、必要な説明はその場に表示したり、押して開く説明を別に用意したりしよう。入力の必須条件をツールチップだけに隠すのは避けたいね。説明内にリンクや操作ボタンが必要なら、単純なツールチップとは別のUIを考えるんだ。
まとめ：ざっくりこれだけ覚えればOK！
「ツールチップ」って出てきたら「ボタンなどのそばに現れる短い補足説明」と思えばだいたいOK！
📖 おまけ：英語の意味
「Tooltip」 ＝ 道具・操作のヒント
💬 Toolは道具、tipはヒントを表す言葉です。操作の意味を短く補う表示を指し、詳しい説明や操作ボタンを詰め込むための画面とは区別します。