「React.js」react-tooltipをインストールしてツールチップを実装するサンプル

2022年9月25日2022年10月2日

環境
Windows 11 Pro 64bit
node v16.16.0
npm 8.11.0
React 18.2.0

操作方法
1.react.js環境を構築します。
「reactdemo」という名前でプロジェクトを作成します。

>cd C:\study\react\
>create-react-app reactdemo

2.作成したプロジェクトに移動します。
>cd reactdemo

3.react-tooltipをインストールします

C:\study\react\reactdemo>npm install react-tooltip

4.「src\App.js」に下記コードを記載します。

import React from 'react';
import ReactTooltip from 'react-tooltip'
import logo from './logo.svg';
import './App.css';

const Button = props => (
  <button type="button" data-tip="ツールチップのサンプル">
    検証<ReactTooltip effect="float" type="info" place="left" />
  </button>
);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />                        
        <Button />
      </header>
    </div>
  );
}

export default App;

5.下記のコマンドを実行します。

>npm start

6.動作確認
ブラウザから http://プライベートIP:3000にアクセスします。
「検証」ボタンを押すと，左側に「ツールチップのサンプル」というツールチップが表示されます。