Revert "Revert "[EuiToolTip] Improve tooltip group transition" (#9748)"

weronikaolejniczak · web-flow · commit f5e051b8331d · 2026-06-23T15:13:08.000+02:00
This reverts commit 7e4e562.
diff --git a/packages/eui/changelogs/upcoming/9689.md b/packages/eui/changelogs/upcoming/9689.md
@@ -0,0 +1,5 @@
+- Updated `EuiToolTip` to skip the entry animation when hovering between adjacent triggers in quick succession, so a group of tooltips behaves like a single continuous tooltip following the cursor
+
+**Bug fixes**
+
+- Fixed `EuiToolTip` rare flicker when the cursor moved between inner children of the trigger
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx
@@ -13,6 +13,7 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiSelectableListItem } from './selectable_list_item';
 import { fireEvent } from '@testing-library/react';
+import { toolTipManager } from '../../tool_tip/tool_tip_manager';
 
 describe('EuiSelectableListItem', () => {
   shouldRenderCustomStyles(<EuiSelectableListItem />);
@@ -24,6 +25,14 @@ describe('EuiSelectableListItem', () => {
   });
 
   describe('props', () => {
+    // The tooltip manager is a module-level singleton that remembers when the
+    // last tooltip closed (to skip the entry animation for grouped tooltips).
+    // Reset it between tests so a tooltip shown by one test doesn't make a
+    // following test's tooltip render with `animation: none`.
+    beforeEach(() => {
+      toolTipManager.reset();
+    });
+
     describe('checked', () => {
       const checkedValues = ['on', 'mixed', undefined] as const;
 
diff --git a/packages/eui/src/components/tool_tip/tool_tip.stories.tsx b/packages/eui/src/components/tool_tip/tool_tip.stories.tsx
@@ -13,6 +13,8 @@ import { enableFunctionToggleControls } from '../../../.storybook/utils';
 import { VRT_SELECTORS } from '../../../.storybook/vrt';
 import { EuiButton } from '../button';
 import { EuiFlexGroup } from '../flex';
+import { useEuiTheme } from '../../services';
+
 import {
   EuiToolTip,
   EuiToolTipProps,
@@ -65,6 +67,31 @@ export const Playground: Story = {
   },
 };
 
+const TooltipGroupStory = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup
+      gutterSize="s"
+      css={{
+        alignSelf: 'flex-start',
+        padding: euiTheme.size.m,
+        inlineSize: '100%',
+      }}
+    >
+      {['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'].map((label) => (
+        <EuiToolTip key={label} content={`Tooltip for ${label}`}>
+          <EuiButton>{label}</EuiButton>
+        </EuiToolTip>
+      ))}
+    </EuiFlexGroup>
+  );
+};
+
+export const TooltipGroup: Story = {
+  render: () => <TooltipGroupStory />,
+};
+
 /**
  * VRT only stories
  */
diff --git a/packages/eui/src/components/tool_tip/tool_tip.test.tsx b/packages/eui/src/components/tool_tip/tool_tip.test.tsx
@@ -19,8 +19,13 @@ import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiToolTip } from './tool_tip';
 import type { EuiToolTipRef } from './tool_tip';
+import { toolTipManager } from './tool_tip_manager';
 
 describe('EuiToolTip', () => {
+  afterEach(() => {
+    toolTipManager.reset();
+  });
+
   shouldRenderCustomStyles(
     <EuiToolTip content="test">
       <button data-test-subj="trigger" />
@@ -175,6 +180,29 @@ describe('EuiToolTip', () => {
       expect(getByRole('tooltip')).toHaveTextContent('Tooltip title');
     });
 
+    it('skips the entry animation when a tooltip opens right after another closes', () => {
+      const { getByTestSubject, getByRole } = render(
+        <>
+          <EuiToolTip content="First">
+            <button data-test-subj="first">First</button>
+          </EuiToolTip>
+          <EuiToolTip content="Second">
+            <button data-test-subj="second">Second</button>
+          </EuiToolTip>
+        </>
+      );
+
+      // First tooltip shows with entry animation
+      fireEvent.mouseEnter(getByTestSubject('first'));
+      expect(getByRole('tooltip').style.animation).toBe('');
+
+      fireEvent.mouseLeave(getByTestSubject('first'));
+
+      // Second tooltip should have inline `animation: none` to suppress entry animation
+      fireEvent.mouseEnter(getByTestSubject('second'));
+      expect(getByRole('tooltip')).toHaveStyle({ animation: 'none' });
+    });
+
     it('does not block clicks on the trigger while the tooltip is visible', () => {
       const onClick = jest.fn();
       const { getByTestSubject, getByRole } = render(
@@ -185,7 +213,7 @@ describe('EuiToolTip', () => {
         </EuiToolTip>
       );
 
-      fireEvent.mouseOver(getByTestSubject('trigger'));
+      fireEvent.mouseEnter(getByTestSubject('trigger'));
       expect(getByRole('tooltip')).toBeInTheDocument();
 
       fireEvent.click(getByTestSubject('trigger'));
diff --git a/packages/eui/src/components/tool_tip/tool_tip.tsx b/packages/eui/src/components/tool_tip/tool_tip.tsx
@@ -58,6 +58,7 @@ interface ToolTipStyles {
   right?: number | 'auto';
   opacity?: number;
   visibility?: 'hidden';
+  animation?: 'none';
 }
 
 const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
@@ -173,6 +174,7 @@ export const EuiToolTip = forwardRef<EuiToolTipRef, EuiToolTipProps>(
     const componentDefaultsContext = useContext(EuiComponentDefaultsContext);
 
     const [visible, setVisible] = useState(false);
+    const [skipAnimation, setSkipAnimation] = useState(false);
     const [hasFocus, setHasFocus] = useState(false);
     const [calculatedPosition, setCalculatedPosition] =
       useState<ToolTipPositions>(positionProp);
@@ -247,10 +249,20 @@ export const EuiToolTip = forwardRef<EuiToolTipRef, EuiToolTipProps>(
       toolTipManager.deregisterToolTip(hideToolTip);
     }, []);
 
+    /**
+     * Show the tooltip.
+     *
+     * Uses the tooltip manager's `skipAnimation` signal to optionally skip the entry
+     * animation when another tooltip is already open or was just closed.
+     */
     const showToolTip = useCallback(() => {
       if (!content && !title) return;
+
+      const result = toolTipManager.registerTooltip(hideToolTip);
+      if (!result) return;
+
+      setSkipAnimation(result.skipAnimation);
       setVisible(true);
-      toolTipManager.registerTooltip(hideToolTip);
     }, [content, title, hideToolTip]);
 
     useImperativeHandle(ref, () => ({ showToolTip, hideToolTip, id }), [
@@ -351,25 +363,26 @@ export const EuiToolTip = forwardRef<EuiToolTipRef, EuiToolTipProps>(
       [disableScreenReaderOutput, visible, hideToolTip]
     );
 
-    const onMouseOut = useCallback(
+    /**
+     * Show the tooltip on enter.
+     */
+    const onMouseEnter = useCallback(
       (event: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => {
-        // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
-        // left the anchor for a non-child.
-        if (
-          anchorRef.current === event.relatedTarget ||
-          (anchorRef.current != null &&
-            !anchorRef.current.contains(event.relatedTarget as Node))
-        ) {
-          if (!hasFocus) {
-            hideToolTip();
-          }
-        }
+        showToolTip();
+        anchorProps?.onMouseEnter?.(event);
+      },
+      [showToolTip, anchorProps?.onMouseEnter]
+    );
 
-        if (onMouseOutProp) {
-          onMouseOutProp(event);
-        }
+    /**
+     * Hide the tooltip if the mouse is not over the trigger.
+     */
+    const onMouseLeave = useCallback(
+      (event: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => {
+        if (!hasFocus) hideToolTip();
+        anchorProps?.onMouseLeave?.(event);
       },
-      [hasFocus, hideToolTip, onMouseOutProp]
+      [hasFocus, hideToolTip, anchorProps?.onMouseLeave]
     );
 
     const classes = classNames('euiToolTip', className);
@@ -383,8 +396,9 @@ export const EuiToolTip = forwardRef<EuiToolTipRef, EuiToolTipProps>(
           onBlur={onBlur}
           onFocus={onFocus}
           onKeyDown={onEscapeKey}
-          onMouseOver={showToolTip}
-          onMouseOut={onMouseOut}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onMouseOut={onMouseOutProp}
           // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
           id={!disableScreenReaderOutput ? id : undefined}
           className={anchorClasses}
@@ -397,7 +411,13 @@ export const EuiToolTip = forwardRef<EuiToolTipRef, EuiToolTipProps>(
           <EuiPortal>
             <EuiToolTipPopover
               className={classes}
-              style={toolTipStyles}
+              style={{
+                ...toolTipStyles,
+                // Inline `animation: none` overrides the keyframes fade-in
+                // shorthand on the base `.euiToolTip` class, so a tooltip
+                // shown right after another closes appears instantly.
+                animation: skipAnimation ? 'none' : undefined,
+              }}
               positionToolTip={positionToolTip}
               popoverRef={setPopoverRef}
               title={title}
diff --git a/packages/eui/src/components/tool_tip/tool_tip_anchor.tsx b/packages/eui/src/components/tool_tip/tool_tip_anchor.tsx
@@ -36,8 +36,8 @@ export const EuiToolTipAnchor = forwardRef<
     {
       onBlur,
       onFocus,
-      onMouseOver,
-      onMouseOut,
+      onMouseEnter,
+      onMouseLeave,
       id,
       className,
       children,
@@ -67,8 +67,8 @@ export const EuiToolTipAnchor = forwardRef<
         id={anchorId}
         {...rest}
         className={classes}
-        onMouseOver={onMouseOver}
-        onMouseOut={onMouseOut}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
       >
         {/**
          * Re: jsx-a11y/mouse-events-have-key-events
diff --git a/packages/eui/src/components/tool_tip/tool_tip_manager.test.ts b/packages/eui/src/components/tool_tip/tool_tip_manager.test.ts
@@ -11,7 +11,7 @@ import { toolTipManager } from './tool_tip_manager';
 describe('ToolTipManager', () => {
   afterEach(() => {
     // Reset the singleton between tests to prevent cross-test contamination
-    toolTipManager.toolTipsToHide.clear();
+    toolTipManager.reset();
   });
 
   describe('registerTooltip', () => {
@@ -44,6 +44,66 @@ describe('ToolTipManager', () => {
     });
   });
 
+  describe('registerTooltip skipAnimation signal', () => {
+    // The skip-animation decision is time-based, so control `Date.now()`.
+    let nowSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      nowSpy = jest.spyOn(Date, 'now').mockReturnValue(1000);
+    });
+
+    afterEach(() => {
+      nowSpy.mockRestore();
+    });
+
+    it('returns skipAnimation: false for the first tooltip', () => {
+      const hide = jest.fn();
+
+      expect(toolTipManager.registerTooltip(hide)).toEqual({
+        skipAnimation: false,
+      });
+    });
+
+    it('returns skipAnimation: true when another tooltip is already open', () => {
+      toolTipManager.registerTooltip(jest.fn());
+
+      expect(toolTipManager.registerTooltip(jest.fn())).toEqual({
+        skipAnimation: true,
+      });
+    });
+
+    it('returns skipAnimation: true when a tooltip closed within the window', () => {
+      const hide = jest.fn();
+      toolTipManager.registerTooltip(hide);
+      toolTipManager.deregisterToolTip(hide); // lastHiddenAt = 1000
+
+      nowSpy.mockReturnValue(1000 + 299); // just inside the 300ms window
+
+      expect(toolTipManager.registerTooltip(jest.fn())).toEqual({
+        skipAnimation: true,
+      });
+    });
+
+    it('returns skipAnimation: false when the last close was outside the window', () => {
+      const hide = jest.fn();
+      toolTipManager.registerTooltip(hide);
+      toolTipManager.deregisterToolTip(hide); // lastHiddenAt = 1000
+
+      nowSpy.mockReturnValue(1000 + 300); // window has elapsed
+
+      expect(toolTipManager.registerTooltip(jest.fn())).toEqual({
+        skipAnimation: false,
+      });
+    });
+
+    it('returns null when re-registering the same tooltip', () => {
+      const hide = jest.fn();
+      toolTipManager.registerTooltip(hide);
+
+      expect(toolTipManager.registerTooltip(hide)).toBeNull();
+    });
+  });
+
   describe('deregisterToolTip', () => {
     it('prevents a deregistered callback from being called when a new tooltip registers', () => {
       // If the current tooltip is already hidden before the next tooltip is visible,
diff --git a/packages/eui/src/components/tool_tip/tool_tip_manager.ts b/packages/eui/src/components/tool_tip/tool_tip_manager.ts
@@ -8,25 +8,57 @@
 
 /**
  * Manager utility that ensures only one tooltip is visible at a time
+ * and lets the next tooltip to open skip its entry animation if another was
+ * just opened or just closed.
  *
  * UX rationale (primarily for mouse-only users):
  * @see https://github.com/elastic/kibana/issues/144482
  * @see https://github.com/elastic/eui/issues/5883
  */
+
+/**
+ * Time window in ms after a tooltip closes during which the next one to open
+ * skips its entry animation.
+ */
+const SKIP_ANIMATION_WINDOW = 300;
+
 class ToolTipManager {
   // We use a set instead of a single var just in case
   // multiple tooltips are registered via async shenanigans
   toolTipsToHide = new Set<Function>();
+  // Timestamp of the last hide; `null` means no tooltip has closed yet.
+  lastHiddenAt: number | null = null;
+
+  registerTooltip = (
+    hideCallback: Function
+  ): { skipAnimation: boolean } | null => {
+    if (this.toolTipsToHide.has(hideCallback)) return null;
+
+    const hadOpen = this.toolTipsToHide.size > 0;
+    const recentlyClosed =
+      this.lastHiddenAt !== null &&
+      Date.now() - this.lastHiddenAt < SKIP_ANIMATION_WINDOW;
 
-  registerTooltip = (hideCallback: Function) => {
-    if (this.toolTipsToHide.has(hideCallback)) return;
     this.toolTipsToHide.forEach((hide) => hide());
     this.toolTipsToHide.clear();
     this.toolTipsToHide.add(hideCallback);
+
+    return { skipAnimation: hadOpen || recentlyClosed };
   };
 
   deregisterToolTip = (hideCallback: Function) => {
-    this.toolTipsToHide.delete(hideCallback);
+    if (this.toolTipsToHide.delete(hideCallback))
+      this.lastHiddenAt = Date.now();
+  };
+
+  /**
+   * Resets all internal state. Primarily intended for tests, so that a
+   * tooltip shown in one test doesn't leak into the next (the manager is a
+   * module-level singleton).
+   */
+  reset = () => {
+    this.toolTipsToHide.clear();
+    this.lastHiddenAt = null;
   };
 }
 
