React SVG Tooltip

A React component to create tooltips for SVG elements.

The library offers a Tooltip component which can be embedded into any SVG element hierarchy. The component does not actually provide a tooltip. Instead, it provides a 0-based coordinate system relative to the current mouse position, so you can place your favorite SVG elements in whichever style suits your needs. Behind the scenes, the library handles all mouse listener logic and makes sure that your tooltip is always rendered on top of all other SVG elements (by using a React portal).

You might want to read this blog post for further details.

Installation

npm install react-svg-tooltip

Note that react and react-dom peer dependencies must already be installed in version 16.3.x or above.

Example Usage

This example demonstrates how to attach a rectangular tooltip with some text to a circle shape. The for property accepts a reference to an arbitrary element (a circle in our example), which further serves as the mouse trigger. Note how the x/y-coordinates of the tooltip contents (rect and text) can be expressed relative to the mouse position.

import * as React from 'react';
import { Tooltip } from 'react-svg-tooltip';

const App = () => {

    const circleRef = React.createRef<SVGCircleElement>();

    return (
        <div className='App'>
            <svg viewBox='0 0 100 100'>
                <circle ref={circleRef} cx={50} cy={50} r={10} fill='steelblue'/>
                <Tooltip for={circleRef}>
                    <rect x={2} y={2} width={10} height={5} rx={.5} ry={.5} fill='black'/>
                    <text x={5} y={5} fontSize={2} fill='white'>Yay!</text>
                </Tooltip>
            </svg>
        </div>
    );
};

export default App;

Acknowledgements

Based on typescript-library-starter-lite.

License

Licensed under MIT License.

© Rahel Lüthy 2018