react-tooltipを使ってみる

mocotech

v4とv5で大幅に異なるので注意

install

npm install react-tooltip

適当にレイアウトする

    <AuthenticatedLayout
      user={auth.user}
      header={
        <h2
          className="font-semibold text-xl text-gray-800 leading-tight"
        >
          Demos
        </h2>
      }
    >
      <Head title="Demos" />

      <div className="py-6 px-4 mx-auto max-w-screen-xl">
        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div className="p-6 flex justify-between">
              <div id="box1" className="p-4 bg-blue-200 rounded-lg shadow w-1/3">
                Box 1
              </div>
              <div id="box2" className="p-4 bg-green-200 rounded-lg shadow w-1/3">
                Box 2
              </div>
              <div id="box3" className="p-4 bg-red-200 rounded-lg shadow w-1/3">
                Box 3
              </div>
            </div>
          </div>
        </div>
      </div>


    </AuthenticatedLayout>

のように

box1にtooltipを出してみる

 import { Tooltip } from 'react-tooltip';
 
 return (
    <AuthenticatedLayout
      user={auth.user}
      header={
        <h2
          className="font-semibold text-xl text-gray-800 leading-tight"
        >
          Demos
        </h2>
      }
    >
      <Head title="Demos" />

      <div className="py-6 px-4 mx-auto max-w-screen-xl">
        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div className="p-6 flex justify-between">
              <div data-tooltip-id="box1" className="p-4 bg-blue-200 rounded-lg shadow w-1/3">
                Box 1
                <Tooltip
                  id="box1"
                  place="bottom"
                  content="Hello world! I'm a Tooltip"
                />
              </div>
              <div id="box2" className="p-4 bg-green-200 rounded-lg shadow w-1/3">
                Box 2
              </div>
              <div id="box3" className="p-4 bg-red-200 rounded-lg shadow w-1/3">
                Box 3
              </div>
            </div>
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  );

こんな感じ

フォーカスすると出現する

別のスタイル


              <div data-tooltip-id="box2" className="p-4 bg-green-200 rounded-lg shadow w-1/3">
                Box 2
                <Tooltip
                  id="box2"
                  place="top"
                  variant="info"
                  content="Hello world! I'm a Tooltip"
                />
              </div>


的な。まあ基本的にはこれだけ。


この記事が気に入ったらサポートをしてみませんか？