Gutenberg: Block controls: Show tooltip on hover, keyboard focus

[aduth]

Block controls have a title property associated with them (example). Currently this is only assigned as the aria-label of the rendered IconButton component. This isn't exposed when hovering the button, so it's hard to know what action is associated with a particular block control.

• Should we show the title as a tooltip?
• How does it look?
• On what actions should it appear? Hover, focus?

[ellatrix]

If it's essential information, it should probably not be shown on hover, and if it isn't, should it be shown at all? (I know this is different in the current editor)

[jasmussen]

For some of the buttons, like the Action Buttons, I think it'd be nice with an immediate tooltip, like this:

For the majority of buttons, like Bold/Italic, etc. — it's probably fine with a title attribute and the stock browser tooltip.

[afercia]

On what actions should it appear? Hover, focus?

I'd say on both, with the caveat that when a control gets clicked or activated with the keyboard, is stays "focused", unless focus is moved somewhere else. So there should be a way to hide the tooltip after the control activation.

Worth noting visual tooltips can be built in an accessible way and using just CSS, using the content property and targeting the aria-label attribute. See for example what GitHub does in this same page (see for example Notifications, Create new, and profile on the top right of this page).

[aduth]

Thanks for pointing to the GitHub example @afercia , I think we could make something like this work for our case. Based on the styles, it appears they're capturing the :hover, :active, and :focus pseudo classes. I'll plan to experiment with these in the editor.

[afercia]

Worth noting that tooltips were also mentioned in the initial accessibility recommendations, see point 8 in #297

Furthermore, they were often mentioned in various "Testing feedback" reported by @karmatosed, see #1546, #1547, #1549, and #1550.

[afercia]

Description of the ARIA tooltip pattern, still in development:
https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip

[afercia]

Worth noting that also the block toolbars don't have any tooltip at the moment. Not even the "Classic Text" one, that uses the native TinyMCE controls:

While the same controls in the old editor do have tooltips:

Right now, they're also used to inform users about the associated keyboard shortcuts. That seems something valuable to me.

[paaljoachim]

It would also be good to add tooltips to the image toolbar so the user can understand what each icon does before clicking it.

[aduth]

See also in-progress work at #839, which was made difficult by positioning, impact of style cascade. With refactoring to Popover component in #2160, I suspect it will become very easy to implement tooltips.

[aduth]

Considering this closed by #2293