Add new delay and transition options to EuiTooltip
Summary
Extended EuiToolTip with granular control over appearance timing and animation. Added two new delay values (short at 100ms, none at 0ms) and a transition prop with fade (opacity-only) and none (instant) options alongside the existing default (opacity + slide).
Implementation:
- Extended
ToolTipDelaytype:'regular' | 'long' | 'short' | 'none' - Added
ToolTipTransitiontype:'default' | 'fade' | 'none' - Created fade-only animation keyframes (omits transform)
- Renamed position animation styles to
topDefault,bottomDefault,leftDefault,rightDefaultto clearly associate them with thedefaulttransition - Added position-specific fade styles (
topFade,bottomFade, etc.) for thefadetransition - Updated tooltip popover logic to conditionally apply animations based on transition type:
transition='default': Applies position-specific animations with movement (slide + fade)transition='fade': Applies fade-only animations without movementtransition='none': Disables all animations for instant display
- Threaded
transitionprop throughEuiToolTip→EuiToolTipPopover→ styles - Props are available as interactive controls in the Playground story for testing
- Removed standalone exported Storybook stories per code review feedback
- Added changelog entry documenting both new features
All changes successfully committed and pushed to remote.
Original prompt
EuiTooltip includes a delay prop, with two options: default and long. I want to add two more values: short and none, which would set the delays to 100ms and 0ms, respectively.
I also want to add a new prop-- transition-- with values of default, fade, and none: default would use the current behavior; fade would use the current behavior but without movement (euiToolTipAnimationVertical and euiToolTipAnimationHorizontal would be omitted, for example), and none would allow the tooltip to simply appear.
Documentation, tests, and Storybook stories need to be created and updated, as well, to demonstrate these new values.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.