🧬

【Tailwind CSS】で作るツールチップ (アイコンhover時に文字を表示する)

2022/06/06に公開約1,300字

やりたいこと

アイコン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]"


挙動

参考記事

https://zenn.dev/catnose99/articles/26bd8dac9ea5268486c8

https://zenn.dev/ilove/articles/f501e24a0a12a8

Discussion

ログインするとコメントできます