diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b04782af..b2ef5367a 100644 --- a/CHANGELOG.md +++ b/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 +- `` + - re-check hover state after swapping the placeholder before triggering the event bubbling + +## Changed + +- `` + - 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 diff --git a/src/components/Icon/IconButton.tsx b/src/components/Icon/IconButton.tsx index 9be4ca9f2..2325ac13f 100644 --- a/src/components/Icon/IconButton.tsx +++ b/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, diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index c2f9629c3..b470e96ed 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/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; } }