Add "show interest" and "lose interest" hover delays to CSS (original) (raw)

Please see the Popover Hint and Hover explainer for more context:

https://open-ui.org/components/popover-hint.research.explainer/

We're working on an addition to the Popover feature that allows authors to easily and declaratively get hover-triggering of popovers. (And to make sure all input modalities are covered, "hover" includes keyboard focus and also touch screen long-press.) The idea for now is to use the popovertargetaction attribute, with a new value called interest (see this discussion for context on the name) that enables this new mode of triggering. When popovertargetaction=interest on a button that points (via popovertarget=foo) to a popover, that popover will be triggered when one of these things happens:

The key phrase above, and the point of this issue, is that the delay should be developer-configurable. Leaving this delay up to the UA leads to issues and missed use cases. For example, the built-in tooltip that shows up as a result of the title attribute has one major, common complaint: the UA-imposed delay is too long. Other, more creative use cases of this feature would also require a customizable hover-delay. For that reason, I'd like to propose that this delay is set in CSS, via a new property:

button[popovertargetaction=interest] { popover-show-delay: 0.5s; }

There is another quite related, yet separate, set of behaviors that happens after the popover is shown. Typical "tooltip" use cases would also like the tooltip to be hidden after the tooltip stops being hovered for a period of time. To make this work, both the invoker (the button above) and the popover should be able to be hovered to maintain the popover in the open state. But once both of them have been de-hovered for a period of time, the popover can be closed. For this, I propose:

[popover] { popover-hide-delay: 1s; }

Note that in the above proposal, the "show" delay is applied to the button that triggers the popover, while the "hide" delay is applied to the popover. That's because those elements are where the action takes place. However, one could make the case that it'd be nice to instead put both properties on one element, and the [popover] would seem to be the natural place to put it. In that case, the above properties could also be combined into a single two-valued property (credit @una for the idea):

[popover] { popover-delay: 0.5s 1s; /* first value = show delay, second value = hide delay */ }

Thoughts?