矢印付きツールチップ
ヘルプアイコンにマウスを乗せると、上に矢印付きの吹き出しが出るツールチップです。JavaScript は使わず、 data-tip 属性に書いた文言を ::before が content:attr(data-tip) で読み込んで表示します。
解説
ヘルプアイコンにマウスを乗せると、上に矢印付きの吹き出しが出るツールチップです。JavaScript は使わず、data-tip 属性に書いた文言を ::before が content:attr(data-tip) で読み込んで表示します。矢印は ::after の透明ボーダーで三角を作り、上辺だけ色を付ける定番の手法です。:hover 時に opacity と transform をあわせて変えるので、すっと持ち上がりながら現れます。
適した用途
- フォーム項目の補足説明アイコン
- 専門用語や設定値へのヒント表示
- 権限や制限の理由を添える注記
文言は data-tip を書き換えるだけで変えられます。色やサイズは吹き出しの背景・文字サイズで調整します。長文だと横にはみ出すため、white-space を折り返し可にして最大幅を決めると安定します。ホバー前提なのでタッチ端末では出にくく、重要な情報はツールチップだけに頼らず本文にも書いておくと安全です。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
表示する文言はどこで変えますか。
ボタンの data-tip 属性に書いた文字列がそのまま吹き出しに出ます。属性を書き換えるだけで内容を差し替えられます。
文章が長いと切れます。
初期設定は一行表示のため横に伸びます。white-space を折り返し可にし、最大幅を指定すると複数行できれいに収まります。