Как управлять рендерингом контента во всплывающей подсказке? ⇐ Javascript

[Anonymous]

У меня есть панель Recharts BarChart с настраиваемой подсказкой, положение которой контролируется вручную.
Когда пользователь наводит указатель мыши на всплывающую подсказку, я замораживаю ее положение, чтобы она не двигалась.
Однако, когда всплывающая подсказка достаточно высока, чтобы перекрывать несколько столбцов, перемещение мыши внутри всплывающей подсказки приводит к изменению содержимого всплывающей подсказки, поскольку Recharts обнаруживает наведение курсора на другую нижнюю панель.
Ожидаемое поведение:

При наведении курсора на всплывающую подсказку и положение, и содержимое должны оставаться заблокированными.
Фактическое поведение:

Положение остается фиксированным, но содержимое всплывающей подсказки обновляется при вертикальном перемещении мыши внутри всплывающей подсказки.
"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(null);
const [hovered, setHovered] = useState(false);
return (
{
if (!e.isTooltipActive || hovered) return;
setPos({ x: e.chartX, y: e.chartY });
}}
>


active ? (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
background: "white",
border: "1px solid black",
height: 120, // overlaps multiple bars
padding: 8,
}}
>
{payload?.[0]?.payload.name}

) : null
}
/>

);
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... e-tool-tip