### Tooltip コンポーネントを作成以下のコードは、ツールチップの基本的なロジックを実装した React コンポーネントです。 ```tsx:/components/Tooltip.tsx "use client"; import React, { useState, ReactNode } from "react"; interface TooltipProps { text: ReactNode; children: ReactNode; } const Tooltip = ({ text, children }: TooltipProps) => { const [showTooltip, setShowTooltip] = useState(false); return (

setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} > {children} {showTooltip && (

{text}

)}

); }; export default Tooltip; ``` ### CSS を追加以下は、ツールチップに適用するスタイルの例です。ざっくりとしたスタイルなので、デザインに合わせてカスタマイズしてください。 ```css:/styles/style.css .tooltip { position: relative; display: inline-block; } .tooltip-text { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: -40px; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } ``` ### 呼び出す以下のようにツールチップコンポーネントを使用して、ボタンにツールチップを追加することができます。 ```tsx import Tooltip from "../components/Tooltip"; const Page = () => { return (

); }; export default Page; ``` React の `useState` フックを利用してツールチップの表示状態を管理し、CSS で見た目を調整することで、簡単に情報を補足するコンポーネントを作成できます。

Next.js でシンプルなツールチップを作成する方法