はじめに
この実験では、React で状態とイベントハンドラを使用してツールチップコンポーネントを作成する方法を学びます。ツールチップは、ユーザーが要素の上にマウスを乗せると表示され、追加情報を提供する小さなポップアップボックスです。この実験が終了すると、React アプリケーションに簡単に統合できるカスタマイズ可能なツールチップを作成できるようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、React で状態とイベントハンドラを使用してツールチップコンポーネントを作成する方法を学びます。ツールチップは、ユーザーが要素の上にマウスを乗せると表示され、追加情報を提供する小さなポップアップボックスです。この実験が終了すると、React アプリケーションに簡単に統合できるカスタマイズ可能なツールチップを作成できるようになります。
VM には既に
index.html
とscript.js
が用意されています。一般的には、script.js
とstyle.css
にのみコードを追加すればよいです。
以下は、もっと明確で簡潔で整合性のあるバージョンのコンテンツです。
このコードはツールチップコンポーネントを作成します。これを使用するには、以下の手順を実行します。
useState()
フックを使用して show
変数を作成し、false
に設定します。children
を含むコンテナ要素をレンダリングします。show
変数によって制御されるツールチップの className
を切り替えることで、onMouseEnter
と onMouseLeave
イベントを処理します。以下はツールチップコンポーネントのコードです。
.tooltip-container {
position: relative;
}
.tooltip-box {
position: absolute;
top: calc(100% + 5px);
display: none;
padding: 5px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
.tooltip-box.visible {
display: block;
}
.tooltip-arrow {
position: absolute;
top: -10px;
left: 50%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
}
const Tooltip = ({ children, text, ...rest }) => {
const [show, setShow] = React.useState(false);
return (
<div className="tooltip-container">
<div className={show ? "tooltip-box visible" : "tooltip-box"}>
{text}
<span className="tooltip-arrow" />
</div>
<div
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
{...rest}
>
{children}
</div>
</div>
);
};
ツールチップコンポーネントを使用するには、以下のコードで ReactDOM.createRoot()
を呼び出します。
ReactDOM.createRoot(document.getElementById("root")).render(
<Tooltip text="Simple tooltip">
<button>Hover me!</button>
</Tooltip>
);
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。
おめでとうございます!あなたはツールチップの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習してください。