ReactのTooltipについて

自作したチャットアプリ（https://queryroom-9178b.web.app/login）を隙間時間を見計らってアップデートしてる際に、Reactの新たな知識を仕入れたので、アウトプットしておきます〜。

Tooltipとは・・・？

チャットアプリでよくある、ユーザーのアイコンをホバーしたらユーザー名やアドレスが表示されるやつ！の実装をしていました。
通常のWeb制作ならjQueryでエレメントの表示/非表示を切り替えるわけですが、Reactには「Tooltip」という、便利なコンポーネントが用意されておりました。
たとえば私の場合、ユーザーのアイコンにホバーさせたらユーザー名を表示したい！となった場合

import { Tooltip } from '@chakra-ui/react'

<Tooltip label={user.displayName} placement="top" hasArrow>
 <img
  //imgタグの詳細は割愛
  key={user.id}
  src={user.avatar}
 />
</Tooltip>

1. ホバー対象をTooltipコンポーネントで囲ってあげる

2. labelはホバーした時に表示したい情報など

3. placementはツールチップの表示位置を設定

4. hasArrowプロパティでツールチップに矢印を付与

というめちゃめちゃ簡単な実装ができました！
デザイン要件が決まってないものやデザイン性を求めない実装であれば、cssの手間も省けますし、超スピード実装できそうです😊