Skip to content

Conversation

@ciampo
Copy link
Contributor

@ciampo ciampo commented Dec 19, 2023

Fixes #57206

What?

Add a new hideOnBlur prop to the Tooltip component which forces the tooltip to hide when its anchor loses focus

Why?

By default, the tooltip closes when interacting with other elements in the same window (see ariakit docs). This means that the tooltip will stay open when the whole window loses focus — for example, this happens when the whole browser loses keyboard focus, or even when moving focus to/from an iframe.

But sometimes it's desirable to have the tooltip hide when its anchor loses focus, hence the addition of the hideOnBlur prop

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

@ciampo ciampo self-assigned this Dec 19, 2023
@ciampo ciampo added [Package] Components /packages/components [Type] Bug An existing feature does not function as intended labels Dec 19, 2023
Comment on lines +70 to +71
showTimeout: delay,
hideTimeout: 0,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks closer to what the Tooltip's delay prop is described as

@ciampo ciampo force-pushed the fix/tooltip-hide-on-blur branch from 35433ab to 28fd5e6 Compare December 22, 2023 13:39
@ciampo ciampo mentioned this pull request Dec 22, 2023
@ciampo
Copy link
Contributor Author

ciampo commented Dec 22, 2023

Closing for now in favor of #57345

@ciampo ciampo closed this Dec 22, 2023
@johnbillion johnbillion deleted the fix/tooltip-hide-on-blur branch February 10, 2025 16:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tooltip doesn't hide when its anchor loses focus

2 participants