Skip to content

[EuiToolTip] Improve tooltip group transition#9749

Draft
weronikaolejniczak wants to merge 1 commit into
mainfrom
revert-9748-revert-9689-poc/tooltip-group-swap
Draft

[EuiToolTip] Improve tooltip group transition#9749
weronikaolejniczak wants to merge 1 commit into
mainfrom
revert-9748-revert-9689-poc/tooltip-group-swap

Conversation

@weronikaolejniczak

@weronikaolejniczak weronikaolejniczak commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Previously reverted on #9748 to derisk a release due to changes needed: elastic/kibana#274383

It was already reviewed and tested, it's good to smoke-test and go again.

Summary

Adjacent EuiToolTip triggers show visually disjoint tooltips. They re-play entry fade-in animation on every hover (~150ms delay + ~90ms fade).

Most design systems solve this by skipping the entry animation within a certain window of time. The show and hide stays synchronous (no timer), preserving the screen-reader behavior from #9626.

Kapture 2026-05-11 at 15 10 35

The anchor now listens with non-bubbling onMouseEnter/onMouseLeave instead of onMouseOver/onMouseOut. This removes the old relatedTarget filtering that was supposed to fix a flicker where the tooltip could hide when the cursor moved between inner children of the trigger.

Inline animation: none must be on first popover render, not after positionToolTip, otherwise CSS keyframes fire briefly before override.

API Changes

N/A

Screenshots

Kapture 2026-06-03 at 15 34 37

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

  • 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
  • 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
  • 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
  • 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 Low

  • VRTs are unaffected (it's an animation change),
  • there is impact for consumers: nested tooltips now won't work as expected by consumers because of no bubbling. Only internal tooltip will be shown.

Prepped changes: Kibana PR

Release Readiness

  • Documentation: {link to docs page(s)}
  • Figma: {link to Figma or issue}
  • Migration guide: {steps or link, for breaking/visual changes or deprecations}
  • Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

Behavior

  • There's only ever one tooltip at a time (potential regression to the tooltip manager original intent)
  • When triggers are next to each other, hovering over them skips animation
  • When triggers are further from each other, hovering over them plays the full animation
  • There is no flickering
  • Turn reduced motion setting on and make sure tooltip displays correctly

Screen readers

  • VO + Chrome announces tooltips reliably (potential regression)
  • VO + Safari announces tooltips reliably (potential regression)
  • NVDA announces tooltips reliably (potential regression)
  • JAWS announces tooltips reliably (potential regression)

Checklist before marking Ready for Review

Reviewer checklist

  • Approved Impact Assessment — Acceptable to merge given the consumer impact.
  • Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

@weronikaolejniczak weronikaolejniczak self-assigned this Jun 23, 2026
@elastic-vault-github-plugin-prod

Copy link
Copy Markdown
2 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euicodeblock (1 difference)

StoryBeforeAfterDiff
virtualized code block scrolling desktop

euidatagrid (1 difference)

StoryBeforeAfterDiff
render custom toolbar desktop

@elastic-vault-github-plugin-prod

Copy link
Copy Markdown
2 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (2 differences)

StoryBeforeAfterDiff
compact desktop
render custom toolbar desktop

@weronikaolejniczak weronikaolejniczak added the skip-vrt Skips Visual Regression Testing job in CI (clearly state why you're using it in your PR) label Jun 23, 2026
@weronikaolejniczak weronikaolejniczak force-pushed the revert-9748-revert-9689-poc/tooltip-group-swap branch from f5e051b to f0aabe3 Compare June 23, 2026 13:33
@elasticmachine

Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @weronikaolejniczak

@elasticmachine

Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @weronikaolejniczak

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-vrt Skips Visual Regression Testing job in CI (clearly state why you're using it in your PR)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants