Loading
Design Examples
Tooltip Design: Real UI Examples
How tooltips teach without nagging, and when a preview beats an explanation — with examples from ABY Journal, Spoil Me, Nike, Spotify, Dia and Yahoo Mail.
Real world examples:
Updated: 26/08/2026, view all 1,450 examples
Examples on Built for Mars include
ABY auto-hides tooltips to cut distraction
Nike explains what a shoe option changes
Spotify mocks up each zoom level visually
When you go to leave a journal entry, ABY will show these tooltips for a few seconds, which then disappear to remove the distraction.
When pointing out key features, Spoil Me will show a tooltip that automatically hides after a few moments.
More context
This removes the click to hide each onboarding tooltip.
But, as a warning, this might not be suitable for complicated or long tooltips.
This only works because what they're pointing out is short and very easy to understand.
When getting set-up with Dia Browser, the customisable colours update the mock-ups dynamically.
More context
This actually gives people context as to what will change colour (e.g., buttons and chats).
Go to UX BiteView#1010
When changing the zoom level on Spotify, they’ll use mock-up images to demonstrated what the layout will look like.
Go to UX BiteView#1348
Timepage offers a unique way to choose your theme colour by dropping animated balls on the screen.
More context
To be clear, this might not be good UX—I'm not even that sure.
It's unique, and interesting, but hardly a good way to actually select a colour.
There are more than 1400 UX Bites like this
See the benefits
There are more than 1400 UX Bites like this
See the benefits
There are more than 1400 UX Bites like this
Subscribe to BFM+
If features can be coded in minutes, thoughtful design is what wins
- Unlock the entire library
- Create custom UX courses
- Access our AI tools
£12 per monthbilled annually
or, wait for the free stuff
Join the free newsletter
Get the free content when it's released, straight to your inbox, no account required
"An exceptional resource for learning how to build habit-forming products that people love."
"I’d never met anybody who looks at usability and UX the way I do until I met Peter. Only he’s smarter."
"The completest view of the psychological underpinnings of human behaviour that I’ve ever seen."
"What a nice idea! Christopher Alexander would be proud to see patterns collected like this."
FAQs
Should onboarding tooltips auto-dismiss or wait for a click?
Auto-dismissing saves people a click, which is why Spoil Me hides its feature tooltips after a few moments. It only holds up because the copy is short and instantly readable; anything longer risks vanishing mid-sentence.
What's the hidden cost of a tooltip that disappears on its own?
Once it's gone, the icon has to carry the meaning alone. ABY Journal flashes its "add media" tooltips for a few seconds when you start a journal entry, so someone returning after a week away is left guessing — one fix is re-showing the tooltip if an action goes unused for four weeks.
When is a tooltip better than just showing the option?
When people don't feel qualified to make the choice. Nike explains what swapping a shoe's outsole to Storm-Tread actually does, a form of progressive disclosure worth adding when analytics show an advanced setting is rarely touched, i.e., the decision isn't understood.
How do you help someone judge a visual setting without explaining it?
Show it rather than describe it. Spotify renders small grid mock-ups for Dense, Default and Spacious zoom levels so an option can be ruled out instantly, while Dia and Yahoo Mail update a live illustration to reveal which parts of the interface a theme colour touches (e.g., buttons and chats).
Can a novel selection interface work against the user?
Yes, when the interaction becomes the task. Timepage has you drop animated balls onto the calendar to pick a theme colour, which is memorable but a slow way to choose a colour.