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

[popover=hint] Are popover-show-delay and popover-hide-delay needed? Can they be abstracted? #781

Open
keithamus opened this issue Jul 13, 2023 · 2 comments
Labels
popover The Popover API

Comments

@keithamus
Copy link
Collaborator

Pulling this out from https://github.com/openui/open-ui/pull/766/files/2232ac991582913f820d1a50709963a3d1f55c9c

@keithamus
These two properties feel useful for more than this. What intrinsic behaviours are needed for these?

Another curiosity; popover-show-delay is somewhat replicable with animation-delay or transition-delay but popover-hide-delay is not. I wonder if there's a bigger problem that can be solved here, for example adding animation-exit states which trigger when a node moves out of a CSS state?

@mfreed7
Interesting feedback! I had envisioned these to work with popovers (and maybe dialogs?) only. How do you envision making them more general?

As to popover-show-delay I'm not sure this can be done with animation-delay - can you prove me wrong? My concern is that the behavior wouldn't be de-bounced in that case. I.e. set popover-show-delay to 0.5 seconds, and have the user hover and then de-hover the element only for 0.2 seconds. Nothing should happen, but I think animation-delay would cause the popover to just be shown after 0.5 seconds, right?

@keithamus
https://codepen.io/keithamus/pen/yLQabJK this uses animation-delay to ensure that as you hover and de-hover (or focus/defocus) the button for less than 0.5s, the div will not be shown. I believe this is properly debounced as you describe. I don't know how to get the same effect upon exit of that state; transitions don't work quite the same, I believe.

@mfreed7
Ahh nice - I see that you get that by adding :focus to clear the animation if you de-hover. But you're right - not possible on the de-hover side of things.

Do you think this is worth opening a CSSWG issue to discuss? I mean about the "more general problem" question?

I've also filed w3c/csswg-drafts#9062 to solicit some discussion from CSSWG about this.

Copy link

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

@github-actions github-actions bot added the stale label Feb 21, 2024
@keithamus
Copy link
Collaborator Author

Still relevant. Also related to #992

@github-actions github-actions bot removed the stale label Feb 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
popover The Popover API
3 participants