Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added buffer to all sides of Tooltip's floating content #2359

Merged
merged 3 commits into from
Nov 27, 2024

Conversation

smmr-dn
Copy link
Contributor

@smmr-dn smmr-dn commented Nov 27, 2024

Changes

This PR added a buffer of 4px to all sides of the Tooltip's floating content so that when users slightly move their mouse outside of the content box, the tooltip is still visible.

Testing

Confirmed that the tooltip is still visible when the mouse moves outside of the border.

buffered-tooltip.mp4

Docs

Added patch changeset.

@smmr-dn
Copy link
Contributor Author

smmr-dn commented Nov 27, 2024

There are two things I would like to ask for more opinions in this PR:

  • I have tested with and without the safePolygon specified in the useHover hook's option and noticed that even with a larger inset that overlaps the trigger element (I have set the pseudo-element's background to white for debugging), the tooltip disappears as soon as the mouse moves out of it. Should I keep this setup so that the transition between the element and the floating content can be kept?
safePolygon-removed.mp4
  • I notice the overflow: hidden clips off the edges of the ::before pseudo-element, which results in the buffer size not showing up correctly. Can we either set overflow to either unset or visible for this buffer content to be fully shown?
overflow: hidden overflow: visible
overflow-hidden.mp4
overflow-visible.mp4

@smmr-dn smmr-dn marked this pull request as ready for review November 27, 2024 17:20
@smmr-dn smmr-dn requested a review from a team as a code owner November 27, 2024 17:20
@smmr-dn smmr-dn requested review from mayank99 and r100-stack and removed request for a team November 27, 2024 17:20
@mayank99
Copy link
Contributor

mayank99 commented Nov 27, 2024

I have tested with and without the safePolygon specified in the useHover hook's option and noticed that even with a larger inset that overlaps the trigger element (I have set the pseudo-element's background to white for debugging), the tooltip disappears as soon as the mouse moves out of it. Should I keep this setup so that the transition between the element and the floating content can be kept?

If it doesn't behave properly without safePolygon, then yeah we should keep it.

I notice the overflow: hidden clips off the edges of the ::before pseudo-element, which results in the buffer size not showing up correctly. Can we either set overflow to either unset or visible for this buffer content to be fully shown?

Yeah that's fine. I'm not sure why we even had overflow: hidden (looks like it was added 3 years ago without any explanation).

Copy link
Contributor

@mayank99 mayank99 left a comment

Choose a reason for hiding this comment

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

LGTM and nice work! Just make sure to add a changeset.

@smmr-dn smmr-dn merged commit 87bbc99 into main Nov 27, 2024
18 checks passed
@smmr-dn smmr-dn deleted the uyen/tooltip-buffer branch November 27, 2024 18:53
@mayank99 mayank99 mentioned this pull request Dec 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants