Temporary tooltips
When you go to leave a journal entry, ABY will show these tooltips for a few seconds, which then disappear to remove the distraction.
Design Examples
Tooltip Design: Real UI Examples
See how companies like Slack, Revolut and Nike time their tooltips, including auto-hiding hints, reactive onboarding and referral nudges, with our annotated UI examples.
Real world examples:
Updated: 26/10/2026, view all 1,496 examples
Examples on Built for Mars include
Revolut teaches card recovery after deletion
Slack retrains users who misuse CMD+K
PostHog adds exact dates to relative filters
The anatomy of a shoe
If you make a major change to a custom shoe on Nike, they’ll show you context about what that change actually means.
Revolut's progressive onboarding
After deleting a card in Revolut, and then going back to view them all, they’ll show a tooltip showing how you could get that card back.
Zero-click onboarding
When pointing out key features, Spoil Me will show a tooltip that automatically hides after a few moments.
Onboarding incorrect shortcuts
Usually, CMD+K is a shortcut to add a link, but Slack uses it for opening the search. To teach you this difference, they'll show a tooltip if you press CMD+K whilst highlighting text.
Contextualising dates
Subscribe to unlock this example
Plans start from £8 per month
Dynamic flight information
Subscribe to unlock this example
Plans start from £8 per month
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
£8/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 hide automatically?
Auto-hiding removes the click needed to dismiss each tooltip, which keeps onboarding light. For example, Spoil Me and ABY both hide their tooltips after a few seconds. This only holds up when the message is short and obvious, so longer or more complex explanations are better left for users to close themselves.
What happens when users forget what a temporary tooltip taught them?
Once the tooltip disappears, the lesson is easy to lose, especially if someone doesn't open the app for a week. The icons and buttons still need to make sense without it. One option is to re-show the tooltip if that action hasn't been used in around 4 weeks.
How do you know if an option needs extra explanation?
Low usage of an option can signal that people don't understand the decision, rather than not wanting it. As an example, Nike shows context on a custom shoe's outsole only when a major change is made, so shoppers don't feel they need specialist knowledge to choose. This is progressive disclosure: detail appears only once it's relevant.
How can a tooltip break an old user habit?
Retraining a learned shortcut is hard, so the tooltip has to appear at the exact moment the mistake is obvious. This is what Slack does: pressing CMD+K while highlighting text suggests someone expects to add a link, so Slack explains the shortcut works differently. Reacting to an input like this is known as reactive onboarding.
Can a tooltip do more than point out a feature?
A tooltip can explain where a feature is and why it's worth using in the same message. For instance, Headspace points to its share button and mentions that new members get a 30-day Guest Pass. Users get a reason to share, not just instructions on how.