react-popper-tooltipでツールチップを作成する方法

JavaScript

react-popper-tooltipを導入することでreact-popperとpopper.jsをベースにしたカスタムフックが利用でき、簡単にツールチップが作成できます。

今回はreact-popper-tooltipを利用してツールチップを作成する方法について紹介します。
今回利用するreact-popper-tooltipのバージョンは4.4.2です。

下準備: react-popper-tooltipのインストール

$ yarn add react-popper-tooltip

一番シンプルなツールチップの作成手順

  1. react-popper-tooltipのusePopperTooltipをインポート
  2. usePopperTooltipからgetTooltipProps、setTooltipRef、setTriggerRef、visibleを取得
  3. ツールチップのトリガ領域のrefにsetTooltipRefを指定
  4. ツールチップで表示する領域のrefにsetTooltipRef、propsにgetTooltipPropsを指定
  5. visibleでツールチップの表示を制御

具体的なコードは以下の通りです。
なお、今回のサンプルコードではreact-popper-tooltipで用意されているCSSを利用していますが、独自定義したCSSも適用できます。

import { FC } from "react";
import { usePopperTooltip } from "react-popper-tooltip";
import "react-popper-tooltip/dist/styles.css";

const App: FC = () => {
  const {
    getTooltipProps,
    setTooltipRef,
    setTriggerRef,
    visible,
  } = usePopperTooltip();
  return (
    <div className="App">
      <button type="button" ref={setTriggerRef}>
        Trigger
      </button>
      {visible && (
        <div
          ref={setTooltipRef}
          {...getTooltipProps({ className: "tooltip-container" })}
        >
          Tooltip
        </div>
      )}
    </div>
  );
};

export default App;

代表的なオプションの紹介

react-popper-tooltipで用意されているオプションのうち代表的なものをいくつか紹介します。
オプションの詳細はreact-popper-tooltipのREADMEを参照してください。

やりたいこと 実現方法
ツールチップに矢印（吹き出し）を追加 getArrowPropsを利用
チールチップの配置の変更 placementオプションを追加
ツールチップの位置の微調整 offsetオプションを追加
ツールチップのトリガイベントの変更 offsetオプションを追加

上記のオプションを追加したサンプルコードが以下になります。

import { FC } from "react";
import { usePopperTooltip } from 'react-popper-tooltip';
import 'react-popper-tooltip/dist/styles.css';

const App: FC = () => {
  const {
    getTooltipProps,
    setTooltipRef,
    setTriggerRef,
    visible,
    getArrowProps,
  } = usePopperTooltip({
    trigger: 'click', // ツールチップの表示トリガをクリックにする
    placement: 'top', // ツールチップを上に表示
    offset: [15, 10], // x軸方向に15px, y軸方向に10pxのオフセットを追加
  });
  return (
    <div className="App">
      <button type="button" ref={setTriggerRef}>
        Trigger
      </button>
      {visible && (
        <div
          ref={setTooltipRef}
          {...getTooltipProps({ className: 'tooltip-container' })}
        >
          <div {...getArrowProps({ className: 'tooltip-arrow' })} />
          Tooltip
        </div>
      )}
    </div>
  );
};

export default App;

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

RECOMMEND