Gutenberg: Use tooltips for all the icon-only controls

[afercia]

Most of the controls in the toolbars use tooltips:

Some of them (typically buttons that open drop down menus) don't:

For consistency, I'd suggest to always use tooltip on all the controls.

[karmatosed]

If some have, all should have. I agree we should add them in for all.

[afercia]

I think the MediaUploadButton should be refactored to be an IconButton.

[hedgefield]

What is the best practice for these on mobile? Pressing a button there also shows the tooltip, and it stays open, which can be a bit annoying because you can't close it and it doesn't go away by itself.

[karmatosed]

Are there any examples of apps showing these on mobile @hedgefield? I can't think of any and would love to know. My feeling is on mobile we shouldn't show, but I'd like some research.

[hedgefield]

Yeah that's the thing, there aren't that many examples, which makes sense since tooltips generally rely on hover. The only ones that work in my opinion are the ones that dropbox/facebook/instagram etc use for onboarding.

They work for two reasons:

• They're already visible when you enter the screen, so there's no unexpected discovery
• They are dismissed when you tap

They also have two problems that makes them a challenge to use for us:

• Once they're dismissed the first time, you never see them again
• They work best in a guided onboarding experience, on a page that has few interactive elements

There might be a way to make it work for us, but I'd also be okay with not showing them on mobile, like you say. If that makes some elements unclear, we could consider adding a label to those, or indeed offering a proper first-run onboarding to quickly explain the basics. Dropbox Paper does that really well.

This is a nice article that describes the considerations. Good discussion here too.

TLDR: shall we just hide them on mobile for now?

[karmatosed]

Thanks for the research @hedgefield. I would say based on that we do not show them on mobile. However, we need to test this to see we aren't leaving mobile users lost. Maybe we can even consider if we need them for desktop based on that.

[hedgefield]

Sounds like a good approach. If we can solve any potential confusion that arises from it with better labels instead of tooltips I'd be all for that too.

[afercia]

Updated the title because this is something that should really be done for all the UI controls thas have no text and are rendered visually with just an icon. It's also something mentioned in the first accessibility recommendations, see #297 point 8:

The icons (such as for headings and arrows and the like) will need some sort of visual explanation. I would not use a title attribute, but instead look at a programmatic tooltip that can be enabled/disabled as a user setting.

Right now, there are still some "icon-only" UI controls that don't use tooltips, for example the "block switcher", the edit image "pencil", and possibly more ones.

I'm also removing the "enhancement" label because I'd rather consider this an UI inconsistency that should be addressed.