feat: Customise tooltip offset optional prop#8988
Merged
paulinashakirova merged 6 commits intoelastic:mainfrom Sep 5, 2025
Merged
feat: Customise tooltip offset optional prop#8988paulinashakirova merged 6 commits intoelastic:mainfrom
paulinashakirova merged 6 commits intoelastic:mainfrom
Conversation
mgadewoll
reviewed
Sep 3, 2025
mgadewoll
reviewed
Sep 4, 2025
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
mgadewoll
approved these changes
Sep 5, 2025
Contributor
mgadewoll
left a comment
There was a problem hiding this comment.
🟢 The changes are looking good and the update works as expected. Thanks for contributing, great work! 🎉
Contributor
Author
🤩 |
tkajtoch
added a commit
to elastic/kibana
that referenced
this pull request
Sep 11, 2025
- `@elastic/eui`: `v106.4.0` ⏩ `v106.5.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
KodeRad
pushed a commit
to KodeRad/kibana
that referenced
this pull request
Sep 15, 2025
- `@elastic/eui`: `v106.4.0` ⏩ `v106.5.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([elastic#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([elastic#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([elastic#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([elastic#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([elastic#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([elastic#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this pull request
Sep 24, 2025
- `@elastic/eui`: `v106.4.0` ⏩ `v106.5.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([elastic#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([elastic#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([elastic#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([elastic#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([elastic#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([elastic#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
niros1
pushed a commit
to elastic/kibana
that referenced
this pull request
Sep 30, 2025
- `@elastic/eui`: `v106.4.0` ⏩ `v106.5.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This pull request adds support for customizing the offset of the tooltip in the
EuiToolTipcomponent, allowing developers to specify how far the tooltip should appear from its anchor element. The default offset remains 16 pixels, but this can now be overridden via a new prop. The changes also include updates to tests and documentation to cover this new feature.Feature enhancement: Tooltip offset customization
offsetprop to theEuiToolTipPropsinterface, allowing consumers to specify the tooltip's offset in pixels from the anchor. The default value is 16.EuiToolTipto use the providedoffsetprop value, falling back to 16 if not specified. [1] [2]Documentation and testing
offsetprop.Why are we making this change?
While the default offset of 16px works well for most use cases, we’ve encountered scenarios—especially when reworking navigation in Kibana—where a custom offset is needed. The side navigation is unique in that we want tooltips to be positioned more closely to their triggers, and the triggers themselves must be 100% width for consistent popover/tooltip positioning.
Screenshots
Screen.Recording.2025-09-02.at.12.51.44.mov
Impact to users
This is not a breaking change, it is on opt-in basis.
QA
General checklist
Props have proper autodocs (usingplayground toggles@defaultif default values are missing) andChecked Code Sandbox works for any docs examplesUpdated visual regression testsIf applicable, added the breaking change issue label (and filled out the breaking change 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)