CSS ツールチップ（複数方向対応）
ボタンなどに data-tooltip 属性で文言を持たせ、 data-pos で表示方向（上・右・下・左）を切り替えられるCSSツールチップです。JavaScriptは使わず、 ::after 疑似要素に content:attr(data-tooltip) でテキストを差し込み、通常は opacity:0 で隠…
解説
ボタンなどに data-tooltip 属性で文言を持たせ、data-pos で表示方向（上・右・下・左）を切り替えられるCSSツールチップです。JavaScriptは使わず、::after 疑似要素に content:attr(data-tooltip) でテキストを差し込み、通常は opacity:0 で隠しておき、ホバーやフォーカス時に transition でふわっと出します。方向ごとに top や left と translate を調整して吹き出しの位置を決めています。
向いている場面
- アイコンボタンの意味を補足するラベル
- フォーム項目の入力ヒント
- 画面端では方向を変えて見切れを避けたい場合
色を変えるなら背景の #1e293b を、文字サイズは font-size を書き換えます。長文には不向きで、white-space:nowrap のため横に伸びる点に注意してください。複数行にしたい場合は nowrap を外して幅を指定します。アクセシビリティ面では、表示トリガーにホバーだけでなくキーボードの :focus も含めておくとマウスを使えない人にも届きます。重要な情報は疑似要素任せにせず、本文や aria-label でも補うのが安全です。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
ツールチップの表示方向はどう変えますか？
各ボタンのdata-pos属性をtop・right・bottom・leftのいずれかに変えるだけで方向が切り替わります。画面端で見切れる場合は、その要素だけ別方向にしておくと安全です。
JavaScriptは必要ですか？
不要です。CSSの疑似要素とhover・focusだけで動きます。ただし疑似要素の文字は読み上げで拾われにくいため、重要な情報はaria-labelなどでも補うことをおすすめします。