Skip to content
A React custom hook to make tooltips
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
docs
src
.gitignore
.npmignore
LICENSE
README.md
package.json
styleguide.config.js
tsconfig.json
yarn.lock

README.md

useTooltip

useTooltip is a React hook to easily create tooltip in your React components.

Install

@seracio/tooltip has 2 peer dependencies that need to be installed first

npm i react react-dom d3-selection
npm i @seracio/tooltip

Usage

You need to be aware of several things:

  • The hook returns 2 things: the component Tooltip itself and a ref to the container
  • The container that will get the ref needs to be in relative position or it won't work
  • The hook will make tooltips on each element with a data-tooltip attribute
  • In this attribute, you can specify html or simple text (no jsx though)
const React, { useState } = require('react');

const MyComponent = () => {
    const [targetIndex, set] = useState(-1);
    const [Tooltip, root] = useTooltip({
        enterCb: el => set(+el.getAttribute('data-tooltip-index')),
        leaveCb: el => set(-1)
    });

    const size = 500;
    const data = [
        {
            x: 0,
            y: 0,
            width: 100,
            height: 100
        },
        {
            x: 300,
            y: 200,
            width: 50,
            height: 80
        }
    ];

    return (
        <div
            style={{
                position: 'relative',
                width: '100%',
                maxWidth: '600px',
                margin: 'auto'
            }}
            ref={root}
        >
            <Tooltip />
            <svg
                preserveAspectRatio="xMidYMid meet"
                viewBox={`0 0 ${size} ${size}`}
            >
                {data.map((d, i) => {
                    return (
                        <rect
                            style={{ cursor: 'pointer' }}
                            key={i}
                            data-tooltip={`rect number ${i + 1}`}
                            data-tooltip-index={i}
                            {...d}
                            fill={targetIndex === i ? 'red' : 'blue'}
                        />
                    );
                })}
            </svg>
        </div>
    );
};

<MyComponent />;

API

// TODO

You can’t perform that action at this time.