[TSVB] Show tooltip on external pointer events (#77306)

* Show external pointer events in TSVB

* Disable tooltip visibility

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: sulemanof

src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js

@@ -70,19 +70,20 @@ export const TimeSeries = ({
   annotations,
 }) => {
   const chartRef = useRef();
-  const updateCursor = (_, cursor) => {
-    if (chartRef.current) {
-      chartRef.current.dispatchExternalPointerEvent(cursor);
-    }
-  };
 
   useEffect(() => {
+    const updateCursor = (_, cursor) => {
+      if (chartRef.current) {
+        chartRef.current.dispatchExternalPointerEvent(cursor);
+      }
+    };
+
     eventBus.on(ACTIVE_CURSOR, updateCursor);
 
     return () => {
       eventBus.off(ACTIVE_CURSOR, undefined, updateCursor);
     };
-  }, []); // eslint-disable-line
+  }, []);
 
   const tooltipFormatter = decorateFormatter(xAxisFormatter);
   const uiSettings = getUISettings();
@@ -139,6 +140,7 @@ export const TimeSeries = ({
           type: tooltipMode === 'show_focused' ? TooltipType.Follow : TooltipType.VerticalCursor,
           headerFormatter: tooltipFormatter,
         }}
+        externalPointerEvents={{ tooltip: { visible: false } }}
       />
 
       {annotations.map(({ id, data, icon, color }) => {