我正在处理vx-react库中的图表。他们有一个工具提示演示，但它们使用类组件，而我使用功能组件。我不确定如何在代码中实现此工具提示。 This is the tooltip documentation.这是我的图表组件。

const x = d => d.name;
const y = d => d.stat;
const xMax = width-80;
const yMax = height-80;


let dataMax = max(data,d => d.stat);
let xScale = scaleBand({
    rangeRound: [0,xMax],padding: 0.1,domain: data.map(d=>d.name)
});
let yScale = scaleLinear({
    rangeRound: [yMax,0],domain: [0,(Math.round(dataMax*2) /2)]
});

const BarChart = props => {

    let content = (
        <svg width={width} height={height}>
            <Group top={25} left={55}>
                <AxisLeft scale={yScale} numTicks={10} label={statType} tickFormat={alFormat} />
                <GridRows
                    scale={yScale}
                    width={xMax}
                    stroke={"black"}
                />
                {data.map((d,i) => {
                    const label = x(d);
                    const barWidth = xScale.bandwidth();
                    const barHeight = yMax-yScale(y(d));
                    const barX = xScale(label);
                    const barY = yMax-barHeight;
                    const barColor = (i===data.length-1) ? leagueColor : barColors[i];

                    return (
                        <Bar
                            key={`bar-${label}`}
                            x={barX}
                            y={barY}
                            width={barWidth}
                            height={barHeight}
                            fill={barColor}
                            bottom={0}
                            onmouseOver={event => console.log(event)}
                        />
                    );
                })}
                <AxisBottom
                    scale={xScale}
                    label="Players"
                    labelOffset={15}
                    top={yMax}
                />
            </Group>
        </svg>
    );
    return content;
}

export default BarChart