@seracio/tooltip

    3.0.0 • Public • Published

    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
    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

    Keywords

    none

    Install

    npm i @seracio/tooltip

    DownloadsWeekly Downloads

    19

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    10.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • seracio