[EuiSuperDatePicker] Add tooltip with full range to "pretty duration" button #9221

acstll · 2025-11-18T13:07:37Z

Summary

This adds a tooltip that displays the full selected range to the pretty duration button. For instance, if the button label is "Last 15 minutes", hovering over the button will show a tooltip with e.g. "Sep 21, 2025 @ 1:45:20.451 – Sep 21, 2025 @ 5:45.31.748".

Resolves https://github.com/elastic/eui-private/issues/441 🔒

Why are we making this change?

As part of a series of improvements to EuiSuperDatePicker that should have a positive immediate impact for users.

Screenshots

Impact to users

🟢 No impact

QA

Verify tooltip introduces no visual regressions (Storybook)

Note

inline padding is different from production, 12px (e.g. as in EuiFieldText and the new EuiFormControlButton) instead of 8px, but we've agreed to leave it like that, at 12px

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - ~~(emulate forced colors if you do not have access to a Windows machine.)~~
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
- ~~If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts

…s object

elasticmachine · 2025-11-20T08:50:34Z

💚 Build Succeeded

History

💚 Build #1997 succeeded 04353ef
💚 Build #1986 succeeded 4e388dd
💔 Build #1984 failed c3976e7

cc @acstll

elasticmachine · 2025-11-20T09:05:53Z

💚 Build Succeeded

Buildkite Build
Commit: 1f4c464

History

💔 Build #5261 failed 04353ef
💔 Build #5251 failed 4e388dd
💔 Build #5248 failed c3976e7

cc @acstll

weronikaolejniczak · 2025-11-20T09:14:17Z

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts

-        `,
-      })}
+    euiSuperDatePicker__prettyDurationTooltip: css`
+      ${logicalCSS('max-width', 'min(58ch, 90vw)')}


That's a neat trick, I like it 👍🏻

weronikaolejniczak

Thank you for updating the test and using HoC 🙏🏻 Code looks good, I tested in Storybook and it behaves as expected! 🟢

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](elastic/eui#8231)) ([#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([elastic#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([elastic#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([elastic#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([elastic#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([elastic#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([elastic#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([elastic#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([elastic#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([elastic#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([elastic#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([elastic#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([elastic#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([elastic#8231](elastic/eui#8231)) ([elastic#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([elastic#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

acstll added 4 commits November 18, 2025 13:59

[EuiSuperDatePicker] Add tooltip with full range to pretty duration

6bbf27c

[EuiSuperDatePicker] Polish pretty duration tooltip

8b21da1

[EuiSuperDatePicker] Add test for pretty duration tooltip

c9b2308

Update snapshots

c3976e7

acstll self-assigned this Nov 18, 2025

acstll added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Nov 18, 2025

Changelog

4e388dd

acstll removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Nov 18, 2025

acstll marked this pull request as ready for review November 18, 2025 16:26

acstll requested a review from a team as a code owner November 18, 2025 16:26

weronikaolejniczak self-requested a review November 19, 2025 11:48

mgadewoll reviewed Nov 19, 2025

View reviewed changes

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts Outdated Show resolved Hide resolved

acstll added 4 commits November 19, 2025 16:49

[EuiSuperDatePicker] Nicer casing for const

30e8df7

[EuiSuperDatePicker] Improve test

2fc3566

[EuiSuperDatePicker] Use RenderWithEuiTheme instead of misusing style…

04353ef

…s object

[EuiSuperDatePicker] Fix tooltip test for React 17

1f4c464

weronikaolejniczak reviewed Nov 20, 2025

View reviewed changes

weronikaolejniczak approved these changes Nov 20, 2025

View reviewed changes

acstll merged commit b71f2be into elastic:main Nov 20, 2025
7 checks passed

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Nov 21, 2025

test(vrt): update images after elastic#9221

f46c0f7

mgadewoll mentioned this pull request Nov 21, 2025

[EuiSuperDatePicker] Fix pretty format button truncation #9231

Merged

16 tasks

mgadewoll added a commit to mgadewoll/eui that referenced this pull request Nov 21, 2025

test(vrt): update images after elastic#9221

5b62b03

weronikaolejniczak mentioned this pull request Nov 24, 2025

Update EUI to 109.2.0 elastic/kibana#244032

Merged

acstll mentioned this pull request Nov 25, 2025

[EuiSuperDatePicker] Papercuts #9239

Merged

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiSuperDatePicker] Add tooltip with full range to "pretty duration" button #9221

[EuiSuperDatePicker] Add tooltip with full range to "pretty duration" button #9221

Uh oh!

acstll commented Nov 18, 2025 •

edited by weronikaolejniczak

Loading

Uh oh!

Uh oh!

elasticmachine commented Nov 20, 2025

Uh oh!

elasticmachine commented Nov 20, 2025

Uh oh!

weronikaolejniczak Nov 20, 2025

Uh oh!

weronikaolejniczak left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiSuperDatePicker] Add tooltip with full range to "pretty duration" button #9221

[EuiSuperDatePicker] Add tooltip with full range to "pretty duration" button #9221

Uh oh!

Conversation

acstll commented Nov 18, 2025 • edited by weronikaolejniczak Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

Uh oh!

elasticmachine commented Nov 20, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 20, 2025

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

acstll commented Nov 18, 2025 •

edited by weronikaolejniczak

Loading