Tooltip component potential additional options/behaviour changes

[ajmchambers]

There are some things which currently feel weird for me when using tooltips:

• If a tooltip is on a button -> I hover that button -> tooltip is displayed -> click button -> the tooltip continues to display (Though I could manually close it on click, would need to make sure it doesn't reopen until leaving and re-entering again)
• (similar to above) If I click a button that has a tooltip before the showDelay period is complete, should it still display?
• on a touchscreen device, tapping a button with a tooltip will display the tooltip (remains open until I tap somewhere else on the page), I can't see an easy way to have the tooltips only appear when hovering with mouse or focusing with keyboard (could probably work around it by removing 'focus' as a trigger option and handling focus/blur events manually)

Some initial thoughts on possible ways to adjust this (for reference: react aria's Tooltip component):

• Adjust the default behaviour to ignore touch and maybe add "touch" as an additional "trigger" (or just use "click") option to retain current behaviour. Or alternatively keep current behaviour and have an 'ignoreTouch' attribute or some other option to ignore non-keyboard triggered focus events.
• Maybe just have "focus" ignore non-keyboard triggered focus events
• Add an attribute similar to react aria Tooltip's shouldCloseOnPress option

Alternatively similar to the react aria example, could simplify it and instead encourage use of a popover if click/touch is desired with a similar message to the following warning that react aria's Tooltip has:

Accessibility

Tooltips are not shown on touch screen interactions. Ensure that your UI is usable without tooltips, or use an alternative component such as a popover to show information in an adjacent element.

Unrelated to the above but the react aria Tooltip has a behaviour that once one tooltip has passed the initial showDelay, subsequent tooltips display instantly until tooltips have been closed for a period of time before having a showDelay again which does feel quite nice too.

Anyway what do you reckon? What doesn't feel natural to me may feel correct to other people, maybe there's an easier way to just workaround it and get my desired behaviour (maybe could detect if wa-show was triggered by touch/mouse/keyboard etc and preventDefault there)?

[claviska]

If a tooltip is on a button -> I hover that button -> tooltip is displayed -> click button -> the tooltip continues to display

A tough call. Automatically hiding it might be the opposite of what others want it to do, so we currently don't care about clicks. For either case, the user would need to add a listener. I'd be open to a PR with something like dismiss-on-click which would let users opt in to that behavior.

If I click a button that has a tooltip before the showDelay period is complete, should it still display?

Hmm. If you click a button quickly, you [hopefully] already know what it is. Would the tooltip be more distracting in that case? Would it appearing instantly feel jarring?

on a touchscreen device, tapping a button with a tooltip will display the tooltip

I agree that tooltips shouldn't show on mobile/touch. We can commit to solving that.

[dorrzun]

Bumping this discussion as it seems to build on a question I have.

What is the current stance on "light dismissal" for <wa-tooltip> when using a click trigger, similar to <wa-dialog>? The current UX requires directly interacting with the trigger to close it, which is arguably a distraction for a user?

Can we build on the W3 recommendations?

[claviska]

Pressing Esc will hide a visible tooltip, but there's no specific light dismissal behavior outside of the usual triggers.

What exactly does "light dismissal" mean in this context? Are you referring to a click outside of the tooltip or something else?

[dorrzun]

Pressing Esc will hide a visible tooltip, but there's no specific light dismissal behavior outside of the usual triggers.

Perfect! Would it be possible to update the docs for that page to note this? It would really help out in sections like Showing & Hiding Manually where it seems that the user must interact with the trigger button to close the tooltip (despite having the Esc key option)

What exactly does "light dismissal" mean in this context? Are you referring to a click outside of the tooltip or something else?

Building on the above, I'm specifically requesting that manually triggered tooltips close when either the trigger is clicked or anywhere else on the page.

[claviska]

A tough call. Automatically hiding it might be the opposite of what others want it to do, so we currently don't care about clicks. For either case, the user would need to add a listener. I'd be open to a PR with something like dismiss-on-click which would let users opt in to that behavior.

After researching this more, a light dismissal pattern is indeed the better approach. Adding this and your other suggestions to my list.

[claviska]

PR #2721