CSS ツールチップ
文字にマウスを乗せると、上に小さな吹き出しで補足説明が出る CSS ツールチップです。説明文は HTML の data-tip 属性に書き、CSS の ::after 疑似要素が content:attr(data-tip) でその値を読み取って表示します。
解説
文字にマウスを乗せると、上に小さな吹き出しで補足説明が出る CSS ツールチップです。説明文は HTML の data-tip 属性に書き、CSS の ::after 疑似要素が content:attr(data-tip) でその値を読み取って表示します。普段は opacity:0 で隠れ、:hover のときだけ opacity:1 で現れ、わずかに上へスライドするので柔らかい印象です。位置は position:absolute と transform:translateX(-50%) で中央に揃えています。JavaScript は不要です。
使いどころ
- 専門用語や略語に短い説明を添える
- アイコンボタンの意味を補う小さなヒント
- フォーム項目の入力ルールをさりげなく示す
吹き出しの色や角丸、文字サイズは ::after の指定で自由に変えられます。white-space:nowrap のため長文だと横に伸びすぎるので、説明は一文程度に短く 収めるのがコツです。注意点として、ホバー専用のためタッチ端末では表示されず、また pointer-events:none でツールチップ内の文字は選択できません。重要な情報は本文に書き、ツールチップは補助に留めるのが安全です。読み上げにも確実に伝えたい場合は aria-label や title を併用すると良いでしょう。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
ツールチップに表示する文章はどこで変えますか
HTMLのdata-tip属性の値を書き換えるだけです。CSS側がその文字列を読み取って吹き出しに表示します。横に伸びすぎないよう、説明は一文程度に短くまとめるのがきれいに見えるコツです。
スマートフォンでも表示されますか
この実装はホバー前提のため、タッチ端末では基本的に表示されません。スマホでも確実に伝えたい補足は、本文に書くかaria-labelやtitle属性を併用し、ツールチップは補助的な位置づけにしておくと安心です。