Make tooltips persist when hovering them

[afercia]

Supersedes #7178
Fixes #7004

Description

This PR supersedes the one by @anevins12 just because many files have moved recently and the previous PR is a bit stale.

A tooltip should persist when the mouse pointer is moved hover the tooltip itself. This is a specific WCAG requirement related to the WCAG 2.1 'Content on hover or focus' guideline:
https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus

Persistent
The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Rationale: https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html

See also the Example 2 in the WCAG page linked above:

The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.

The screenshot in the WCAG example comes from Gmail. You can test it "live" there. They've implements persistent tooltips meaning they're still visible when the mouse pointer is moved over them:

This PR only concerns non-TinyMCE buttons, simply removing pointer-events: none; does what we need.

The TinyMCE fix is coming from #core, see conversation on Slack > #core-tinymce: https://wordpress.slack.com/archives/C0UCMQP0F/p1528130639000183

[afercia]

Going to merge this anyways, as it's a teeny-tiny PR.

[afercia]

For reference: opened https://core.trac.wordpress.org/ticket/44604 for TinyMCE in core.

[pento]

Thanks for tackling this issue, @afercia!

Even for small changes, please do remember to get a review before merging them, as there can be unintended side effects. There are folks who are more than happy to work on ensuring these kinds of micro interactions are pleasant for everyone.

A few things that stand out about this change:

The popover needs cursor: default; set, having a text cursor appear on a tooltip looks weird.

It's now fiddly to access buttons underneath the hover. For example:

Interestingly, the GMail tooltip behaviour has changed in their redesign, tooltips now behave more like native tooltips: they disappear a short time after the element they're associated with loses hover state. I agree that this behaviour feels awkward when you're using a large pointer, though: it's tricky to move the pointer out of the way and read the tooltip before it disappears.

One thing I like from the GMail redesign is that pointer events are being passed through the tooltip, to the element below it, so it's possible to focus on UI elements that are obscured by the tooltip.

Are you able to create a new PR to address the outstanding issues here? I imagine that @karmatosed would have more specific feedback about the behaviour she has in mind for tooltips.

[afercia]

@pento thanks for your feedback. Adding a cursor: default; style is pretty easy of course. However, I wouldn't know how to address the other concerns.

the GMail tooltip behaviour has changed in their redesign, tooltips now behave more like native tooltips: they disappear a short time after the element they're associated with loses hover state

This just means the previous Gmail version met the WCAG requirement, while the new version doesn't.

I'd also like to remind this is a WCAG requirement, and as per the WordPress accessibility standards, all new code must conform to WCAG level AA.

Reading https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html there are 3 items to address to meet the requirement:

• dismissable
• hoverable
• persistent

I'd agree the "dismissable" part is missing. The guideline requires "a mechanism to dismiss the additional content without moving pointer hover or keyboard focus", and the suggestion is "by pressing Escape".

If you revert Gmail to "Classic Gmail" you can observe this behavior:

• hover on a button, the tooltip appears and persists
• don't move the mouse
• press Escape: the tooltip disappears

I'd totally second implementing the Escape thing, but I'd need some help as I wouldn't know how to implement such a "global" behavior for all the tooltips in the UI.

One thing I like from the GMail redesign is that pointer events are being passed through the tooltip, to the element below it, so it's possible to focus on UI elements that are obscured by the tooltip.

I doubt this is doable, as the "hover" on the tooltip is needed to make it persist.

Worth also noting some improvements to the positioning of the tooltips could help, see #6669 (inconsistent positioning) and #7660 (broken with RTL).

[afercia]

I've pushed #8147 as an attempt to improve the tooltips behavior. Any help would be greatly appreciated. /Cc @pento