diff --git a/frontend/src/scenes/insights/LineGraph/LineGraph.js b/frontend/src/scenes/insights/LineGraph/LineGraph.js index c8235ce8e5e..566cd705ec2 100644 --- a/frontend/src/scenes/insights/LineGraph/LineGraph.js +++ b/frontend/src/scenes/insights/LineGraph/LineGraph.js @@ -61,6 +61,7 @@ export function LineGraph({ const [boundaryInterval, setBoundaryInterval] = useState(0) const [topExtent, setTopExtent] = useState(0) const [annotationInRange, setInRange] = useState(false) + const [tooltipVisible, setTooltipVisible] = useState(false) const size = useWindowSize() const annotationsCondition = @@ -78,6 +79,20 @@ export function LineGraph({ buildChart() }, [datasets, color, visibilityMap]) + // Hacky! - Chartjs doesn't internally call tooltip callback on mouseout from right border. + // Let's manually remove tooltips when the chart is being hovered over. #5061 + useEffect(() => { + const removeTooltip = () => { + const tooltipEl = document.getElementById('ph-graph-tooltip') + + if (tooltipEl && !tooltipVisible) { + tooltipEl.style.opacity = 0 + } + } + removeTooltip() + return removeTooltip // remove tooltip on component unmount + }, [tooltipVisible]) + // annotation related effects // update boundaries and axis padding when user hovers with mouse or annotations load @@ -378,6 +393,11 @@ export function LineGraph({ evt.target.style.cursor = 'default' } } + if (evt.type === 'mouseout') { + setTooltipVisible(false) + } else { + setTooltipVisible(true) + } }, }, onClick: (_, [point]) => {