eui icon indicating copy to clipboard operation
eui copied to clipboard

Add new delay and transition options to EuiTooltip

Open Copilot opened this issue 1 month ago • 26 comments

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 ToolTipDelay type: 'regular' | 'long' | 'short' | 'none'
  • Added ToolTipTransition type: 'default' | 'fade' | 'none'
  • Created fade-only animation keyframes (omits transform)
  • Renamed position animation styles to topDefault, bottomDefault, leftDefault, rightDefault to clearly associate them with the default transition
  • Added position-specific fade styles (topFade, bottomFade, etc.) for the fade transition
  • 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 movement
    • transition='none': Disables all animations for instant display
  • Threaded transition prop through EuiToolTip → 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.

Copilot avatar Nov 07 '25 21:11 Copilot