[EuiToolTip] Refactor to a functional component, memoize style and improve tests by weronikaolejniczak · Pull Request #9570 · elastic/eui

weronikaolejniczak · 2026-04-07T11:35:17Z

Tip

There's not a lot of changes but I do recommend following commits.

Warning

Revert 68bbc21 before merging!

Summary

What: Migrated EuiToolTip to a functional component, memoized its styles, updated the usages and improved the test suite. Additionally, fixed a bug where the tooltip doesn't reposition when resizing the window.
Why: Closes [EuiToolTip] Migrate from class to function component #9486 [EuiToolTip] Memoize generated styles #9521 [EuiToolTip] [Strict Mode] Tooltip doesn't display #8785 [EuiToolTipProps] position and delay marked as required when they aren't #9593
How:
- The component is migrated as-is with all its bells and whistles: repositionOnScroll, persist on click behavior, delay etc. There's supposed to be NO REGRESSION.
- The majority of tests are snapshots. We should only use them for the "renders" test case. Otherwise, we should use meaningful assertions. Rewrote tests.
- Many cases are missing from the test suite around tooltips. Added tests.

API Changes

🟢 No API changes.

Screenshots

🟢 No visual changes.

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

(WIP - will update snapshots for Kibana before merging)

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

Verify test cases are meaningful (do not rely on CI being 🟢)

`EuiToolTip`

Story: Playground

Pre-existing issue:

Resize the window while tooltip is visible → tooltip repositions correctly (prod, d226eb5)

`EuiIconTip`

Story: Playground

Icon renders with default question-mark type
Tooltip appears on hover/focus
aria-label is read by screen reader (set aria-label prop and use VoiceOver/NVDA)
Custom type, color, size props affect the icon

`EuiFilterSelectItem`

Story: FilterGroup / Multiple Popovers

Clicking on the items shows a tooltip (programmatically: showToolTip())
Clicking outside hides the tooltip (programmatically: hideToolTip())

`EuiSelectableListItem`

Story: Selectable / With Tooltip

Use Arrow keys to navigate within the selectable list.

Keyboard-focus on a selectable item that has a tooltip → tooltip shows (programmatically: showToolTip())
Blur → tooltip hides (programmatically: hideToolTip())
aria-describedby on the .euiSelectableListItem__content is set to the tooltip's id (check with browser inspector)

`EuiCollapsedNavButton`

Story: CollapsibleNav (Beta) / Playground

Collapsed nav item shows tooltip on hover (in collapsed mode)

`EuiContextMenuItem`

Story: ContextMenu / Playground

Context menu item with toolTipContent shows tooltip on hover

Escape key propagation

Inside a flyout

Escape closes tooltip only, does not close the flyout
After closing the tooltip, Escape closes the flyout

Inside a modal

Escape closes tooltip only, does not close the modal
After closing the tooltip, Escape closes the modal

Inside a popover

Escape closes tooltip only, does not close the popover
After closing the tooltip, Escape closes the popover

Strict Mode

Verify tooltip wrapped with <StrictMode> renders correctly

Checklist before marking Ready for Review

Filled out all sections above
QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
QA: Tested in CodeSandbox and Kibana
QA: Tested docs changes
Tests: Added/updated Jest, Cypress, and VRT
Changelog: Added changelog entry
Breaking changes: Added breaking change label (if applicable)

VRT passed:

There were unrelated image reference updates. I added them on 451f7a5

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 · 2026-04-07T11:50:17Z

This is an expected change. Previously, position leaked to the DOM element but it's not a valid HTML attribute. Same as offset.

weronikaolejniczak · 2026-04-08T15:22:17Z

+    const setPopoverRef = useCallback(
+      (el: HTMLElement) => {
+        popoverRef.current = el;
+        if (el) positionToolTip();


In commit: a38e23d

This line is the only change from the diff. Otherwise, we are just moving positionToolTip to be before the setPopoverRef that calls it.

if (el) positionToolTip(); fixes tooltip not showing in StrictMode because EuiResizeObserver (class component) has ResizeObserver disconnected by StrictMode's simulated unmount before the initial callback fires, so positionToolTip is never called. Calling it directly from setPopoverRef every mount ensures that it gets positioned correctly.

This doesn't affect anything detrimentally.

weronikaolejniczak · 2026-04-08T15:34:08Z

-  };
+  const setPopoverRef = useCallback(
+    (ref: HTMLDivElement) => {
+      popover.current = ref;


Adding this line fixes pre-existing bug where the tooltip wouldn't reposition on resizing the window.

Copilot

Pull request overview

Refactors EuiToolTip from a class component to a functional component with hooks, updates related components/usages, and rewrites/expands tests to use more meaningful assertions while also addressing tooltip repositioning behavior.

Changes:

Migrate EuiToolTip to forwardRef + hooks and expose an imperative ref API (EuiToolTipRef).
Memoize tooltip/anchor styles via useEuiMemoizedStyles and adjust tooltip popover behavior.
Rewrite and expand Jest tests + update snapshots across tooltip consumers.

Reviewed changes

Copilot reviewed 16 out of 25 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/eui/src/components/tool_tip/tool_tip.tsx	Converts `EuiToolTip` to a hook-based functional component and introduces `EuiToolTipRef`.
packages/eui/src/components/tool_tip/tool_tip.test.tsx	Rewrites tooltip unit tests to rely less on snapshots and add behavioral assertions.
packages/eui/src/components/tool_tip/tool_tip.stories.tsx	Adds new QA-focused stories (currently flagged as TODO to remove).
packages/eui/src/components/tool_tip/tool_tip_popover.tsx	Switches to memoized styles and adds resize-driven repositioning logic.
packages/eui/src/components/tool_tip/tool_tip_manager.test.ts	Improves test isolation and expands assertions around singleton behavior.
packages/eui/src/components/tool_tip/tool_tip_anchor.tsx	Memoizes anchor styles via `useEuiMemoizedStyles`.
packages/eui/src/components/tool_tip/index.ts	Re-exports `EuiToolTipRef` type from the public tooltip entrypoint.
packages/eui/src/components/tool_tip/icon_tip.test.tsx	Updates IconTip tests away from prop-specific snapshots toward behavioral checks.
packages/eui/src/components/tool_tip/snapshots/tool_tip.test.tsx.snap	Updates snapshots for tooltip rendering changes.
packages/eui/src/components/tool_tip/snapshots/icon_tip.test.tsx.snap	Removes outdated snapshots tied to previous IconTip prop rendering expectations.
packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx	Updates tooltip ref usage to the new `EuiToolTipRef` API.
packages/eui/src/components/selectable/selectable_list/snapshots/selectable_list_item.test.tsx.snap	Updates snapshots for tooltip attribute changes in selectable list items.
packages/eui/src/components/filter_group/filter_select_item.tsx	Updates tooltip ref typing to `EuiToolTipRef`.
packages/eui/src/components/filter_group/filter_select_item.test.tsx	Adds/updates tests for programmatic tooltip show/hide behavior.
packages/eui/src/components/context_menu/snapshots/context_menu_item.test.tsx.snap	Updates tooltip snapshot output (removes invalid DOM attrs).
packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/snapshots/collapsed_nav_button.test.tsx.snap	Updates tooltip snapshot output (removes invalid DOM attrs).
packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Controlled_With_Files.png	Adds/updates Loki reference image (appears unrelated to tooltip refactor).
packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png	Adds/updates Loki reference image (appears unrelated to tooltip refactor).
packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png	Adds/updates Loki reference image (appears unrelated to tooltip refactor).
packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Controlled_With_Files.png	Adds/updates Loki reference image (appears unrelated to tooltip refactor).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-08T15:44:17Z

  display?: (typeof DISPLAYS)[number];
  /**
   * Delay before showing tooltip. Good for repeatable items.
   */
-  delay: ToolTipDelay;
+  delay?: ToolTipDelay;
  /**
   * An optional title for your tooltip.
   */
  title?: ReactNode;
  /**
   * Unless you provide one, this will be randomly generated.
   */
  id?: string;
  /**
   * Suggested position. If there is not enough room for it this will be changed.
   */
-  position: ToolTipPositions;
+  position?: ToolTipPositions;


PR description states "No API changes", but this diff makes delay optional in the public EuiToolTipProps type. Even though it's non-breaking, it's still an exported type surface change and should be reflected in the PR's API section (or reverted if unintended).

EuiToolTip can absolutely be used without providing delay and position. position is set to top and delay to regular by default.

So no, this is not an API change. delay and position are in fact typed as optional.

Copilot · 2026-04-08T15:44:18Z

 export type { ToolTipPositions } from './tool_tip_popover';
-export type { EuiToolTipProps } from './tool_tip';
+export type { EuiToolTipProps, EuiToolTipRef } from './tool_tip';
 export { EuiToolTip } from './tool_tip';


PR description states "No API changes", but this diff re-exports a new public type (EuiToolTipRef) from the tool_tip index. Even if it's additive, please update the PR's API section to reflect the exported surface change (or keep it internal if not intended as public API).

It is an undocumented public API. Let's leave this be.

tkajtoch

Code changes look great! I'm proceeding to manual testing

Copilot

Pull request overview

Copilot reviewed 16 out of 25 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/eui/src/components/tool_tip/tool_tip.tsx:396

When neither content nor title are provided, showToolTip can still set visible=true, which causes the trigger to receive aria-describedby (via isVisible) even though no tooltip element is rendered (visible && (content || title) gate). This produces an aria-describedby that points to a non-existent element. Consider short-circuiting showToolTip/onFocus/onMouseOver (and/or the id/isVisible wiring) when there is no tooltip content so that visible never becomes true in this case.

    return (
      <>
        <EuiToolTipAnchor
          {...anchorProps}
          ref={setAnchorRef}
          onBlur={onBlur}
          onFocus={onFocus}
          onKeyDown={onEscapeKey}
          onMouseOver={showToolTip}
          onMouseOut={onMouseOut}
          // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
          id={!disableScreenReaderOutput ? id : undefined}
          className={anchorClasses}
          display={display}
          isVisible={visible}
        >
          {children}
        </EuiToolTipAnchor>
        {visible && (content || title) && (
          <EuiPortal>

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

tkajtoch

Code changes look good. I went through all QA steps and tested some more combinations - everything works as expected.

While testing StrictMode, I've noticed that the tooltip doesn't appear on initial focus via autoFocus, only on subsequent hover/focus events.

weronikaolejniczak · 2026-04-27T10:09:13Z

@tkajtoch I added a unit test and checked manually, indeed autoFocus didn't show the tooltip in StrictMode, good catch! I added a small fix on bb46282 which passed the tests. Also, "fixed" that typo you mentioned earlier on d827e24 and addressed the edge case Copilot shared above on 38163a8.

Copilot

Pull request overview

Copilot reviewed 16 out of 25 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

tkajtoch · 2026-04-27T15:12:37Z

I tested the StrictMode autoFocus fix locally and can confirm it works as expected. Thank you for addressing it!

Copilot

Pull request overview

Copilot reviewed 15 out of 24 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

elasticmachine · 2026-04-28T10:18:45Z

💚 Build Succeeded

History

💚 Build #3345 succeeded 5ba550b
💚 Build #3333 succeeded 38163a8
💚 Build #3261 succeeded c508ee3
💚 Build #3175 succeeded 8a2d8e1
💚 Build #3174 succeeded 03ca9cd
💚 Build #3170 succeeded 402d1a1

cc @weronikaolejniczak

elasticmachine · 2026-04-28T10:34:56Z

💚 Build Succeeded

Buildkite Build
Commit: 53bbe85

History

💚 Build #6340 succeeded 5ba550b
💚 Build #6328 succeeded 38163a8
💚 Build #6280 succeeded c508ee3
💚 Build #6207 succeeded 8a2d8e1
💚 Build #6202 succeeded 402d1a1
💚 Build #6193 succeeded 1bd098c

cc @weronikaolejniczak

weronikaolejniczak added 3 commits April 7, 2026 12:25

refactor(eui): migrate EuiToolTip to functional component

7204c9d

refactor(eui): memoize EuiToolTip styles

7e4fec1

refactor(eui): update EuiToolTip usages

45cc756

weronikaolejniczak self-assigned this Apr 7, 2026

weronikaolejniczak added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Apr 7, 2026

chore(eui): update VRT reference images

451f7a5

weronikaolejniczak commented Apr 7, 2026

View reviewed changes

weronikaolejniczak added 2 commits April 7, 2026 17:22

chore(eui): update EuiToolTip test suite

221f34e

chore(eui): update EuiIconTip test suite

fcc3c7e

This was linked to issues Apr 7, 2026

[EuiToolTip] Memoize generated styles #9521

Closed

[EuiToolTip] [Strict Mode] Tooltip doesn't display #8785

Closed

weronikaolejniczak force-pushed the chore/refactor-tooltip branch from d9d22cc to 64f6572 Compare April 8, 2026 14:32

weronikaolejniczak changed the title ~~[EuiToolTip] Refactor to a functional component, memoize style and improve test suite~~ [EuiToolTip] Refactor to a functional component, memoize style and improve tests Apr 8, 2026

weronikaolejniczak commented Apr 8, 2026

View reviewed changes

weronikaolejniczak added 5 commits April 8, 2026 17:28

chore(eui): add filter select item tooltip test

d7c08d6

REMOVE BEFORE MERGE - temp stories

722bc07

refactor(eui): update nits after review

b806650

fix(eui): fix tooltip reposition on resize window

d226eb5

fix(eui): position tooltip on mount fixing StrictMode

a38e23d

weronikaolejniczak force-pushed the chore/refactor-tooltip branch from 19449a9 to a38e23d Compare April 8, 2026 15:30

weronikaolejniczak commented Apr 8, 2026

View reviewed changes

weronikaolejniczak marked this pull request as ready for review April 8, 2026 15:36

weronikaolejniczak requested a review from a team as a code owner April 8, 2026 15:36

Copilot AI review requested due to automatic review settings April 8, 2026 15:36

Copilot started reviewing on behalf of weronikaolejniczak April 8, 2026 15:37 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

weronikaolejniczak added 4 commits April 8, 2026 18:07

chore(eui): just some formatting weirdness

402d1a1

refactor(eui): narrow types in EuiToolTip

88161ad

chore(eui): change test to it in filter select item test

a89ee57

fix(eui): use ref on htmlIdGenerator return value

d9cec6d

tkajtoch reviewed Apr 9, 2026

View reviewed changes

Comment thread packages/eui/src/components/tool_tip/tool_tip_popover.tsx Outdated

tkajtoch reviewed Apr 9, 2026

View reviewed changes

weronikaolejniczak linked an issue Apr 15, 2026 that may be closed by this pull request

[EuiToolTipProps] position and delay marked as required when they aren't #9593

Closed

mgadewoll mentioned this pull request Apr 17, 2026

[EuiPortal] Migrate to function component #9598

Merged

20 tasks

Merge remote-tracking branch 'upstream/main' into chore/refactor-tooltip

c508ee3

weronikaolejniczak requested review from Copilot and tkajtoch April 24, 2026 08:51

Copilot started reviewing on behalf of weronikaolejniczak April 24, 2026 08:51 View session

Copilot AI reviewed Apr 24, 2026

View reviewed changes

Comment thread packages/eui/src/components/tool_tip/tool_tip.tsx Outdated

Comment thread packages/eui/src/components/tool_tip/tool_tip.stories.tsx Outdated

tkajtoch reviewed Apr 24, 2026

View reviewed changes

weronikaolejniczak added 4 commits April 27, 2026 12:03

chore(eui): fix the typo in comment

d827e24

chore(eui): add a test for StrictMode autoFocus

eeac8f7

fix(eui): fix tooltip not showing on autoFocus in StrictMode

bb46282

fix(eui): wrap hideToolTip with isMounted condition

38163a8

weronikaolejniczak requested review from Copilot and tkajtoch April 27, 2026 10:07

Copilot started reviewing on behalf of weronikaolejniczak April 27, 2026 10:08 View session

Copilot AI reviewed Apr 27, 2026

View reviewed changes

Comment thread packages/eui/src/components/tool_tip/tool_tip.stories.tsx Outdated

tkajtoch approved these changes Apr 27, 2026

View reviewed changes

chore: revert temp stories

5ba550b

weronikaolejniczak requested a review from Copilot April 27, 2026 15:16

Copilot started reviewing on behalf of weronikaolejniczak April 27, 2026 15:17 View session

Copilot AI reviewed Apr 27, 2026

View reviewed changes

Merge branch 'main' into chore/refactor-tooltip

53bbe85

weronikaolejniczak enabled auto-merge (squash) April 28, 2026 10:05

weronikaolejniczak merged commit 842820d into elastic:main Apr 28, 2026
5 checks passed

Conversation

weronikaolejniczak commented Apr 7, 2026 • edited by tkajtoch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Changes

Screenshots

Impact Assessment

Release Readiness

QA instructions for reviewer

EuiToolTip

EuiIconTip

EuiFilterSelectItem

EuiSelectableListItem

EuiCollapsedNavButton

EuiContextMenuItem

Escape key propagation

Inside a flyout

Inside a modal

Inside a popover

Strict Mode

Checklist before marking Ready for Review

Reviewer checklist

Uh oh!

weronikaolejniczak Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented Apr 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

tkajtoch commented Apr 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

weronikaolejniczak commented Apr 7, 2026 •

edited by tkajtoch

Loading

`EuiToolTip`

`EuiIconTip`

`EuiFilterSelectItem`

`EuiSelectableListItem`

`EuiCollapsedNavButton`

`EuiContextMenuItem`

weronikaolejniczak Apr 7, 2026 •

edited

Loading

weronikaolejniczak Apr 8, 2026 •

edited

Loading