Icon buttons with tooltips

I always find it satisfying whenever I move my cursor over an unfamiliar icon button, hoping to see a tooltip describing the button, and a tooltip actually appears!

So I thought I'd share a few things I've learnt about improving the user experience/accessibility of icon buttons^[1] with tooltips.

Icon buttons are nice, as they save space and are aesthetic, but they make a bad user experience when used without textual labels. If the icon on an icon button isn't familiar, users may not immediately understand what the button does. They may have to click the button to find out, and doing so may trigger an undesired action.

Tooltips are perhaps the most common way to label these icon buttons. You'll find them on OS interfaces (Windows, for example, uses them generously), on desktop and mobile apps, and, of course, on the web. In fact, there's a title attribute built into HTML for adding a tooltip to an element (though its use is discouraged).

Typically, a tooltip appears after a short delay when you do one of these actions:

• Hover your cursor over its button.
• Move focus to the button (e.g. by tabbing your way to the button).
• Long-tap the button on a touchscreen.

The tooltip then disappears when you do one of these:

• Move your cursor away from the button (unless you move the cursor towards the tooltip itself).
• Move focus away from the button.
• Release the button after long-tapping it.
• Press the Esc key.

The tooltip text is also exposed to assistive technologies such that a screen reader user, for example, hears the text when they interact with the button.

If you're a fellow frontend dev, you usually don't need to implement these behaviours yourself when you need a tooltip, as your favourite accessible UI library likely already does so for you.

If you'd like to implement them yourself though, or you're just curious ;-), I'd recommend reading the tooltips chapter of the (free) Inclusive Components book. It doesn't cover all the behaviours described here, but it lays a good foundation for creating your own accessible tooltips.