超シンプルなツールチップコンポーネントを自作した

はじめに Next.js でシンプルないい感じのツールチップコンポーネントを自作したので、作成する方法のメモになります。 前提 React / Next.js / TypeScript の基礎理解、環境構築 Tailwind CSS の基礎理解、環境構築 今回作るもの ↑ のようなツールチップコンポーネント 本文 ソースコードの掲載後にコンポーネントの説明を記載します。 最終的なソースコード import { memo, useRef } from "react"; // ツールチップ内に表示するためのprops type Props = { tooltipText: string; }; // ツールチップ export const Tooltip: React.FC<Props> = memo((props) => { // ツールチップの文言自体のためのref const ref =