I have a Recharts BarChart with a custom tooltip whose position is manually controlled.
When the user hovers over the tooltip, I freeze its position so it doesn’t move.
However, when the tooltip is tall enough to overlap multiple bars, moving the mouse inside the tooltip causes the tooltip content to change, because Recharts detects hover on another bar underneath.
Expected behavior:
While hovering over the tooltip, both position and content should remain locked.
Actual behavior:
Position stays fixed, but tooltip content updates as the mouse moves vertically inside the tooltip.
"use client";
import { useState } from "react";
import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
const data = [
{ name: "A", value: 400 },
{ name: "B", value: 300 },
{ name: "C", value: 200 },
];
export default function Chart() {
const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
const [hovered, setHovered] = useState(false);
return (
<BarChart
width={400}
height={300}
data={data}
layout="vertical"
onMouseMove={(e) => {
if (!e.isTooltipActive || hovered) return;
setPos({ x: e.chartX, y: e.chartY });
}}
>
<Tooltip
position={pos ?? undefined}
content={({ active, payload }) =>
active ? (
<div
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
background: "white",
border: "1px solid black",
height: 120, // overlaps multiple bars
padding: 8,
}}
>
{payload?.[0]?.payload.name}
) : null
}
/>
);
}