React.js ライブラリ「react-tooltip」を使用してツールチップを実装する

ライブラリ「react-tooltip」をインストールすると、ツールチップの実装が簡単に可能です。ここでは、react.jsで react-tooltipを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. react.js環境構築
3. react-tooltipインストール
4. react-tooltip使い方

環境

OS CentOS Linux release 8.0.1905 (Core)
node V12.13.1
npm 6.14.1
React 16.13.0

react.js環境構築

下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。

create-react-app react-app

react-tooltipインストール

作成したプロジェクトに移動して、インストールします。

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install react-tooltip

react-tooltip使い方

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="Hello">
    button
    <ReactTooltip effect="float" type="info" place="right" />
  </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;

実行します。