[ML] Fixes a race condition where the chart tooltip could be hidden e…

…ven if it should be shown. (#23270)

- Even with the check if fadeTimeout was set in show(), I could reproduce race conditions where a new tooltip would disappear again, because a previous fadeTimeout would trigger and set the new tooltips display to none.
- This PR fixes it by adding a non-asynchronous visible flag to mlChartTooltipService to check if the tooltip should stay visible if fadeTimeout triggers.

x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js

@@ -14,13 +14,15 @@ const FADE_TIMEOUT_MS = 200;
 export const mlChartTooltipService = {
   element: null,
   fadeTimeout: null,
+  visible: false
 };
 
 mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }) {
   if (this.element === null) {
     return;
   }
 
+  this.visible = true;
   // if a previous fade out was happening, stop it
   if (this.fadeTimeout !== null) {
     clearTimeout(this.fadeTimeout);
@@ -64,14 +66,18 @@ mlChartTooltipService.hide = function () {
     return;
   }
 
+  this.visible = false;
+
   this.element.css({
     opacity: '0',
   });
 
   // after the fade out transition has finished, set the display to
   // none so it doesn't block any mouse events underneath it.
   this.fadeTimeout = setTimeout(() => {
-    this.element.css('display', 'none');
+    if (this.visible === false) {
+      this.element.css('display', 'none');
+    }
     this.fadeTimeout = null;
   }, FADE_TIMEOUT_MS);
 };