How to implement tooltip in React stateless component

Question

All:

I am pretty new to React, what I try to build is a tooltip response to a hover on a SVG element, for example, I build a STATELESS component like:

(props) =>{
var data = props.data;
return (
    <g>
        {
            data.map((d, si) => {
                var logoTrans = "translate(10,"+ si*20+")";
                return (
                    <g transform={logoTrans} key={si}>
                        <rect x="20" y="12"></rect>
                    </g>
                )
            })
        }
    </g>

    <g>
        {
            data.map((d, si) => {
                var logoTrans = "translate(10,"+ si*20+")";
                return (
                    <g transform={logoTrans} key={si}>
                        <text>{d}</text>
                    </g>
                )
            })
        }
    </g>
    )
}

What I want to do is to hover each <rect> and and according <text> shows up(with same si, the text originally display:none )

Answer 1

I've just open-sourced react-svg-tooltip which hopefully addresses your requirements.

It allows to link SVG tooltips to arbitrary SVG elements via references, ie it doesn't matter if your rect and text are in parallel level groups.

All mouse hovering logic is handled behind the scenes. Moreover, the library makes sure that your tooltips are always rendered on top (by usage of a React portal).