🧬
【Tailwind CSS】で作るツールチップ （アイコンhover時に文字を表示する）
やりたいこと
アイコンhover時に"設定"という文字を表示させたい
Google Keepの見本がこちら
実装
<button className=" p-3 relative group hover:bg-slate-200 rounded-full ">
<VscSettingsGear size='1.2rem'/>
<span className="opacity-0 w-[74px] invisible rounded text-[12px]
font-bold text-white py-1 bg-slate-600 top-11 -left-3
group-hover:visible opacity-100 absolute ">設定
</span>
</button>
親classに"group"を入れ、子classにgroup-hover: とすることで親のhover時に子要素が表示されます。
子要素自体の表示・非表示はopacity-0 invisible、group-hover:visible opacity-100で管理します。
位置関係は親要素にrelative、子要素にabsoluteで調整すれば完成です。
失敗例
invisibleとhover:visibleを入れ忘れていると、子要素のhover時にも表示されてしまいました。
<button className=" p-3 group hover:bg-slate-200 rounded-full relative">
<VscSettingsGear size='1.2rem'/>
<span className="opacity-0 px-2 rounded text-[12px] font-bold text-white p-1 bg-slate-600
group-hover:opacity-100 absolute top-11 right-0.5">設定</span>
</button>
(Tailwind CSSの余談)
ちなみに、フォントサイズや色を指定したい時は[]で囲むんですね。（今回知りました）
className="text-[12px] bg-[#FCE5CE]"
挙動
参考記事
Discussion