8 Tooltip Examples to Inspire You in 2022
Looking at tooltip examples from other SaaS businesses is a great way to save yourself the time and hassle associated with trying to do it all from scratch.
Obviously, we’re not advocating that you copy the rest of the market outright, but every creative person throughout history has taken inspiration from their peers. So why should your onboarding be any different?
Here at Userpilot, we see a lot of tooltips every day, thanks to the hundreds of SaaS companies that we work with.
So allow us to share some of the most striking tooltip examples with you.
- A tooltip is a short section of text that’s attached to one product feature, as a way of explaining it to users.
- Tooltips can be standalone UI elements, or alternatively, they can be part of an extended experience flow.
- Common tooltip use cases include interactive walkthroughs, secondary onboarding, upsells and feature adoption.
- You can view instructive tooltip examples from Asana, Slack, Airbnb, Postfity, Miro, Facebook, Ahrefs and Rocketbots.
- It’s smarter to build your tooltips code-free using a tool like Userpilot, rather than trying to code everything yourself from scratch.
What is a tooltip?
Let’s begin with a definition, just to make sure that we’re on the same page about what a tooltip is.
A tooltip is a small section of text that is designed to explain how one particular element of your product works.
It normally appears when a user hovers over the element in question, or a little “i” icon that’s next to the element.
The text is brief by design: you wouldn’t want to obscure the UI element or the rest of your platform.
After a few seconds, or if the user clicks away, the tooltip text vanishes again.
Tooltips come in two main varieties:
One tooltip or a group of tooltips
There’s a standalone simple tooltip, which is sufficient on its own to educate a user about how to use a particular UI pattern. It’s often used to explain one part of the UI that’s not immediately intuitive.
There’s also the possibility to create multiple tooltips as part of a larger “experience flow.” Here, tooltips are combined with other onboarding components such as modals, driven actions and hotspots.
Hotspots or native tooltips
These are flashy little hotspots or small words like New or Beta that are static on your UI that signal an element the user should pay attention to. Mostly used to build feature discovery.
Userpilot allows you to build both types of tooltips. Read more about how to do so (code-free!) here.
What are tooltips used for?
On the Userpilot blog, we often emphasize how versatile the tooltip is as a means of customer education.
Possible use cases include:
User onboarding interactive walkthroughs tooltips
Tooltips are used to highlight the features that your new users need to learn in order to activate.
Typically, an onboarding checklist will take you from feature to feature, each one requiring the user to take some action in order to learn how it works. Each feature will normally have a tooltip or another UI pattern that explains it.
Advanced features discovery with tooltips on a specific element
Customer education doesn’t end after primary onboarding and activation are complete.
Intelligent SaaS companies use tooltips to explain the less intuitive parts of their product at all stages during the customer lifecycle.
Even a customer who’s been with you for a year can probably still learn something from a well-placed tooltip.
Drive account expansion with tooltips
The great thing about tooltips is that they’re so seamless to integrate into the overall customer experience because they’re so small.
They’re also designed in such a way that they only refer to one UI element at a time, and they’re always placed directly next to that element.
This makes tooltips perfect for upselling new features in an unobtrusive, hyper-relevant way.
Do you have one stubborn feature that your customers just cannot figure out?
Perhaps you know that your users would love your new feature or add-on if they could only find it.
If you’re using Asana daily you will most definitely miss a small UI change like the button for starting to record a video. This is where tooltips help.
And Asana uses them well.
When you start typing, they let you know of the new feature and point it out.
Top 8 tooltip examples used in SaaS
Now that you know what tooltips are and what they can be used for, here are some examples of how you could use them.
Tooltip example #1: Asana feature announcement
This tooltip is used by Asana to highlight the dark mode feature to their users.
Dark mode is far from being a core part of Asana, so it’s fair to say that this is a secondary feature.
Note how the colored tooltip stands out nicely against the plain background so that it gets your attention.
Note also that it’s easy to dismiss the tooltip once you’ve seen it. Just click on the CTA button. That way, you’re not left with an annoying tooltip that you can’t get rid of!
Tooltip example #2: Slack feature enhancement
This tooltip appears next to the “send message” feature in Slack to tell users that they can schedule their messages to be sent later, if they wish.
The “send message” feature is a primary component of Slack and one that’s very intuitive to use, but the “schedule for later” part of it is largely unknown.
As such, the timing and positioning of this tooltip are nothing short of genius. The tooltip appears at night, just when the user might be thinking that they don’t want to bother their colleagues after they’ve signed out, right next to the UI for sending messages.
Both the header and the body copy are extremely easy to scan and understand in a matter of seconds.
Slack gets full marks for relevancy and immediacy with this one.
Tooltip example #3: Airbnb feature enhancement education
It goes without saying that the average Airbnb user probably knows how to use a search bar, so creating a tooltip to explain a basic search function would have been overkill.
But Airbnb made this particular tooltip to highlight the expanded functionality of their search bar.
In times where search terms like “corona” might be an important part of travel-related conversations, this seems like a smart move.
And for users who didn’t know that this functionality was available, this tooltip serves as a valuable source of customer education.
Note again that the copy is extremely simple, to the point of being scannable in a matter of seconds, and that the black tooltip pops nicely against the white background.
Tooltip example #4: Postfity
We’re particularly proud of this example, as it was built with Userpilot.
Postfity is a social media scheduling tool, so one of the main features it provides is the ability to post social media content.
A typical pain point of Postfity’s customers is figuring out what to say on social media. Since most of their customers are small businesses, they have a lot of things to stay on top of, and don’t necessarily have time to brainstorm hundreds of insightful Facebook posts.
So the purpose of this tooltip is to highlight a solution to that pain point: Postfity’s Social Tips Calendar.
In this particular screenshot, you can see the user working on positioning the tooltip so that it’s close to the Social Tips Calendar in the navigation bar.
Tooltip example #5: Miro
This is a nice example of a tooltip being used to drive product growth.
As a collaborative brainstorming tool, Miro becomes more valuable to teams if multiple team members join the platform, so it’s very much in Miro’s interests to encourage customers to invite their colleagues.
In this particular example, it’s not the tooltip itself that stands out against the background, but rather the blue CTA button. The color contrast means that it’s just asking to be clicked on.
That being said, if the customer doesn’t want to invite their colleagues for whatever reason, the tooltip still gives them a way out — in this case through an X icon to the top-right.
Tooltip example #6: Facebook
As one of the most engaging (or addictive!) products out there, it’s no surprise that Facebook has mastered the art of tooltips.
When Facebook first introduced the ability to respond to posts in different ways, they did so to an audience that was used to only being able to “like” a post. So they needed a way of showing their customers that the “Like” button had changed.
Something like release notes or an email would have been much too formal and would have probably been ignored by a substantial portion of their user base.
A tooltip was a much better choice. Located right next to the “Like” button, it was really impossible to miss. Using the word “New!” in the copywriting was another way to make the tooltip stand out.
Tooltip example #7: Ahrefs
One of the reasons that Ahrefs has become so dominant in the world of SEO is that its technology provides value to both beginner and advanced marketers alike.
Even a beginner SEO can navigate to Ahrefs’ dashboard and read off some impressive-sounding metrics like Domain Reputation.
For slightly more advanced users, Ahrefs provides tooltips like this one to educate them about the technical potential of their platform.
So armed with the knowledge they’ve learned from this tooltip, an SEO lead could now collect different data from http and https sites, respectively.
The tooltip’s orange CTA button matches Ahrefs’ branding perfectly, and the color contrast of the white tooltip against the black header makes it easy to read.
Tooltip #8: Rocketbots
This is an example of a tooltip being used to lead customers towards activation. Let me explain.
Rocketbots’ value proposition is to put all of your inboxes and messaging tools on one platform, as a way of saving you time. It calls these inboxes “channels.”
So to become an active user of Rocketbots, you’ll need to connect at least one channel. Without that, the platform doesn’t really offer you any value.
As a way of reducing Time to Value and getting its users to activate as efficiently as possible, Rocketbots has created this tooltip to encourage people to connect their first channel.
Note that the copy on this tooltip is unusually wordy. Rocketbots might explain this by arguing that it’s extremely important that users understand this feature, and the extra technical knowledge required in order to activate justifies the additional friction.
To code, or not to code tooltips?
Now that you’ve had a look at these tooltip examples, you might be tempted to jump right in and start coding your own tooltips and customize them with CSS.
Hang on just one second, tiger.
Consider that if you want to code all of your tooltips from scratch, each one will require about this much code:
Multiply that by the number of tooltips inside your product, and that’s quite a bit of work, especially for devs who are already rather busy. Imagine all the engineering work they could be doing on your product in the meantime…
But that’s not all. Consider further that your tooltips will need to be coded again every time you want to make a minor change.
- New color? Another CSS tooltip.
- Rebrand? That will be one pure CSS tooltip, please.
- A/B test the copy? More pure CSS tooltips…
Sound like a nightmare, if you ask me. But then again, maybe your devs have loads of time on your hands, and you don’t mind paying them to code tooltips as well?
A better solution- Build tooltips with Userpilot
A simpler option is to partner with Userpilot. Our software will let even your least technical product marketers build tooltips without writing a line of code.
This frees up your devs to engineer your product and empowers your product marketing team to build and iterate your onboarding system on their own terms.
Not to mention track results towards your goals and user engagement, directly inside the dashboard.
Since developer hours are normally one of the most expensive line items on any SaaS owner’s monthly list of expenses, you’ll save money in the long run, too.
Having read this article, you should have a better idea of what you want your tooltips to look like for your brand, and what you can use them for.
Just promise me one thing: please don’t code them yourself!
You’ll save time and money by working with onboarding software like Userpilot to build them without needing to code.
Want to try it out for yourself and see? Click here to book your demo today!