ホバーツールチップ
要素にマウスを乗せると、その上に小さな吹き出しでヒントを表示するシンプルなホバーツールチップです。 data-tip 属性に文言を入れ、 ::after 疑似要素の content:attr(data-tip) でテキストを差し込みます。
解説
要素にマウスを乗せると、その上に小さな吹き出しでヒントを表示するシンプルなホバーツールチップです。data-tip 属性に文言を入れ、::after 疑似要素の content:attr(data-tip) でテキストを差し込みます。さらに ::before で吹き出しの三角（しっぽ）を作り、本物の吹き出しらしく見せています。通常は opacity:0 と縮小状態で隠し、ホバー時に transition でふわっと拡大表示します。JavaScriptは不要です。
使う場面
- 用語やアイコンの意味をさっと補足したい時
- フォーム項目の短い入力ヒント
- 限られたスペースで情報を隠して見せたい時
背景色は #1e293b、文字色は #f1f5f9、文字サイズは font-size で調整します。white-space:nowrap のため横一行で表示され、長文には向きません。複数行が必要なら nowrap を外して幅を決めてください。注意点として、ホバーだけだとタッチ端末では表示できないため、重要な情報はツールチップ任せにせず本文でも伝えること。キーボード操作にも対応させたい場合は、ホバーに加えて :focus でも表示するよう拡張するとよいでしょう。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
ツールチップの文言はどこで設定しますか？
対象要素のdata-tip属性に表示したいテキストを書きます。CSSの疑似要素がその値を読み取って吹き出しに表示するため、HTMLの属性を変えるだけで文言を差し替えられます。
スマホのタッチでも表示できますか？
この実装はホバー前提のため、タッチ端末では表示されにくいです。重要な情報はツールチップだけに頼らず本文でも示し、必要ならタップやfocusで表示する仕組みを足してください。