ホバーツールチップ
要素にマウスを乗せると説明が浮かび出る、CSS 主体のホバーツールチップです。吹き出しはトリガーボタンを基準に position:absolute で上側へ配置し、 left:50% と translateX(-50%) で中央寄せします。
解説
要素にマウスを乗せると説明が浮かび出る、CSS 主体のホバーツールチップです。吹き出しはトリガーボタンを基準に position:absolute で上側へ配置し、left:50% と translateX(-50%) で中央寄せします。通常は opacity:0 で隠し、ホバー時に不透明へ transition させてふわっと表示。下向きの小さな三角は ::after の border で描いており、画像を使いません。role="tooltip" と aria-describedby を付け、支援技術にも説明として伝わるよう配慮しています。
向いている場面
- フォーム項目の補足説明やアイコンの意味の提示
- 用語や略語へのワンポイント解説
- ボタンの機能を短く添えたいツールバー
色や文字サイズは tth__box の CSS にまとまっており、ブランドに合わせて変えられます。white-space:nowrap のため長文は折り返さない点に注意し、長い説明では幅指定を加えてください。ホバーはキーボードやタッチでは発火しないため、フォーカスでも表示されるよう調整すると、よりアクセシブルになります。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
ツールチップの位置を下側に変えられますか
今は要素の上に出る設定です。CSS で吹き出しの bottom 指定を top に、三角を描く擬似要素の向きを反対にすれば下側に表示できます。中央寄せの指定はそのまま使えます。
キーボード操作でも表示されますか
この例はマウスのホバーで表示する作りです。キーボード利用者にも見せるには、フォーカス時にも表示されるよう CSS のホバー条件にフォーカスの状態を加えると、よりアクセシブルになります。