[React Bootstrap] Tooltips を表示してみる | 心を無にして始める React

2022-08-01

今回は、Tooltip コンポーネントを表示します。

準備

まだ components フォルダがなければ作ります。

src を右クリックして New Folder 。

components と入力してフォルダを作ります。

今回は、components フォルダに Tooltip のコンポーネントを作って、表示してみます。

公式のドキュメントはここ。

https://react-bootstrap.github.io/components/overlays/#tooltips

Tooltip コンポーネントをつくる

component フォルダに Tooltip.js を作ります。

Tooltip.js を心を無にして編集してみます。

import React from 'react';
import { Tooltip as BootstrapTooltip } from 'react-bootstrap';

const Tooltip = React.forwardRef(({
  children,
  ...otherProps
}, ref) => {

  return (
    <BootstrapTooltip ref={ref} {...otherProps}>
      {children}
    </BootstrapTooltip>
  )
})

export default Tooltip;

プロジェクトでは、コンポーネントを統一したデザインで利用することが多いです。

そのため、（React Bootstrap のコンポーネントをその場その場でカスタマイズしながら使うよりも、）プロジェクトでコンポーネントにしたものを使うほうが、変更をお手軽に漏れなくできることが多いです。

Tooltip コンポーネントを表示する

それでは、 App.js を編集して Tooltip コンポーネントを表示します。

import React from 'react';
import './App.css';

import OverlayTrigger from './components/OverlayTrigger';
import Tooltip from './components/Tooltip';

function App() {
  return (
    <>
      <div className="p-5 bg-dark">
        <div className="p-5 d-flex flex-column justify-content-center align-items-center">
          <OverlayTrigger
            placement="right"
            trigger={["hover"]}
            delay={{ show: 250, hide: 400 }}
            overlay={
              <Tooltip>
                right
              </Tooltip>
            }
          >
            <div className="p-5 bg-light d-flex justify-content-center align-items-center rounded">
              <h1>BASE</h1>
            </div>
          </OverlayTrigger>
        </div>
      </div>
    </>
  );
}

export default App;

画面を確認してみます。

はい、できました。