純 CSS ツールチップ
data-tip 属性に書いた文字列を、ホバー時に吹き出しで表示する 純 CSS ツールチップ です。JavaScript は不要で、 ::after の content:attr(data-tip) で属性値をそのまま吹き出しに流し込み、 ::before で下向きの三角形を作っています。
解説
data-tip 属性に書いた文字列を、ホバー時に吹き出しで表示する純 CSS ツールチップです。JavaScript は不要で、::after の content:attr(data-tip) で属性値をそのまま吹き出しに流し込み、::before で下向きの三角形を作っています。通常は opacity:0 と pointer-events:none で隠し、:hover で表示。transition によってふわっと浮き上がるように現れます。
使う場面
- フォーム項目の補足説明やアイコンの意味の解説
- 専門用語や略語にカーソルを合わせたときの注釈
- ボタンや設定スイッチの役割を短く伝えるヒント
表示文は HTML 側の data-tip を書き換えるだけで差し替えられ、CSS には文言を持たせません。white-space:nowrap のため長文だと横に伸びるので、長い説明は max-width を付けて折り返すと収まります。なお CSS だけのツールチップはホバー前提でキーボードやタッチ操作では出にくいため、重要な情報は本文に明記し、補助的なヒントに留めるのが安全です。色や位置は背景色と bottom の値で調整できます。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
ツールチップの文言はどこで変えますか？
対象要素の data-tip 属性に書いた文字列がそのまま吹き出しに表示されます。CSS は触らず、HTML の data-tip を編集するだけで内容を変更できます。
スマホやキーボード操作でも表示されますか？
このスニペットは :hover が前提のため、タッチ操作やキーボードフォーカスでは表示されにくいです。重要な情報はツールチップに頼らず本文にも記載し、ここはあくまで補助的なヒントとして使うのが安全です。