Prevent wrongly displayed tooltips (CMEM-6858)

CHANGELOG.md

@@ -10,6 +10,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   React flow v12:
     -   add missing styles from react flow library to ensure proper functionality of new connection lines
+-   `<Tooltip />`
+    -   re-check hover state after swapping the placeholder before triggering the event bubbling
+
+## Changed
+
+-   `<IconButton/>`
+    -   increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended
 
 ## [24.3.1] - 2025-08-21
 

src/components/Icon/IconButton.tsx

@@ -50,7 +50,7 @@ export const IconButton = ({
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
         openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
-        swapPlaceholderDelay: 1,
+        swapPlaceholderDelay: 10,
     };
     const iconProps = {
         small: restProps.small,

src/components/Tooltip/Tooltip.tsx

@@ -134,7 +134,15 @@ export const Tooltip = ({
                         (target as HTMLElement).focus();
                         break;
                     case "afterhover":
-                        (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+                        // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up
+                        (target as HTMLElement).addEventListener(
+                            "mouseover",
+                            () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })),
+                            {
+                                capture: true,
+                                once: true,
+                            }
+                        );
                         break;
                 }
             }