From 1b5f1bfe33312bd9eaacceb3fae5845ebdf8db80 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Wed, 12 May 2021 19:52:19 +0200
Subject: [PATCH] Fix tooltip not closing (#34001)

* Fix tooltip not closing

* make this a bit less hacky

* use a more specific element for the mouseleave event

* Make sure we limit running of effect

* Remove console log

* Probably don't need useCallback
---
 .../components/uPlot/plugins/TooltipPlugin.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index f4274d80eac..f47116796f1 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
@@ -47,6 +47,22 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
     pluginLog(pluginId, true, `Focused series: ${focusedSeriesIdx}, focused point: ${focusedPointIdx}`);
   }, [focusedPointIdx, focusedSeriesIdx]);
 
+  useEffect(() => {
+    const plotMouseLeave = () => {
+      setCoords(null);
+    };
+
+    if (plotCtx && plotCtx.plot) {
+      plotCtx.plot.root.querySelector('.u-over')!.addEventListener('mouseleave', plotMouseLeave);
+    }
+
+    return () => {
+      if (plotCtx && plotCtx.plot) {
+        plotCtx.plot.root.querySelector('.u-over')!.removeEventListener('mouseleave', plotMouseLeave);
+      }
+    };
+  }, [plotCtx.plot?.root, setCoords]);
+
   // Add uPlot hooks to the config, or re-add when the config changed
   useLayoutEffect(() => {
     if (config.tooltipInterpolator) {