リッチツールチップ（タイトル + 説明）
これは、はてなアイコンにホバーまたはフォーカスすると、タイトル付きの詳しい説明が下からふわっと現れるリッチツールチップです。 strong の見出しと補足文を含められるため、一行では足りない説明に向きます。
解説
これは、はてなアイコンにホバーまたはフォーカスすると、タイトル付きの詳しい説明が下からふわっと現れるリッチツールチップです。strong の見出しと補足文を含められるため、一行では足りない説明に向きます。仕組みは CSS のみで、:hover と :focus の状態に応じて opacity と transform を変化させて表示します。JavaScript を使わない軽量な構成です。
こんな用途に向きます
- フォーム項目の入力ルールや注意点の補足
- 専門用語や略語のその場での説明
- アイコンだけの機能ボタンの意味を伝えたいとき
トリガー要素に tabindex="0" を付けているため、マウスだけでなくキーボードのフォーカスでも開けるのがポイントです。吹き出しの色は .rt-tip の background、幅は min-width で調整できます。表示位置を上向きにしたい場合は top を bottom に置き換えます。画面端で見切れる場合があるので、端に近い要素では出る方向を切り替える配慮をすると安心です。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
ツールチップはキーボードでも表示できますか？
はい。トリガーに tabindex=0 を付けているため、Tab キーでフォーカスを当てると :focus 状態で表示されます。マウスを使えない利用者にも内容が伝わります。
表示される向きを上に変えられますか？
できます。CSS の .rt-tip で top: calc(100% + 10px) としている部分を bottom に置き換えると、アイコンの上側に表示されるようになります。