Fix lingering tooltips in Line Graphs (#5663)

* fix lingering tooltips

* handle component unmount scenario

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]) => {