[csswg-drafts] Add hover/focus/long-press triggering delays to CSS (#9236)

mfreed7 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Add hover/focus/long-press triggering delays to CSS ==
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](https://github.com/openui/open-ui/issues/767#issuecomment-1654177227) 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 user mouse-hovers the button *for a specified period of time*, or
- The user keyboard-focuses the button *for a specified period of time*, or
- The user long-presses the button *for a specified period of time*

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:

```css
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:

```css
[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):

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

Thoughts?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9236 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 24 August 2023 16:17:49 UTC