User Onboarding · 8 min read
What Are Tooltips in Web Design + 14 Examples to Set Yours Up
A tooltip is a small message anchored to one screen element that explains it. Hover tooltips appear when you point at or focus an element; onboarding tooltips are shown by the product, with a short title, a sentence and a button. In the 11 onboarding tooltips we measured, the body ran 33 to 106 characters.
By Selman Gökçe
In short
Use a tooltip when the message is about one visible element and fits in a sentence or two; otherwise use a modal or a hotspot. Real onboarding tooltips kept their body copy to 33 to 106 characters, well under this post's old 180-character ceiling. You can code one, use a library or buy a tool, priced here as of October 2026.
Most definitions of a tooltip describe the hover kind: a few words that appear when you point at an icon. Product teams usually mean something else, the onboarding tooltip a product shows on its own to point at a feature. The two follow different rules, and real onboarding tooltips are shorter than most guides suggest: in the 11 we transcribed from this post's screenshots, the body text ran from 33 to 106 characters.
What is a tooltip?
A tooltip is a small text box anchored to one element of an interface that explains that element, usually with an arrow pointing at it. There are two kinds, and mixing them up causes most bad tooltips:
| Hover tooltip | Onboarding tooltip | |
|---|---|---|
| Trigger | The user points at or focuses the element | The product shows it: on first visit, after an action, or as a step in a tour |
| Content | A label or a few words | A short title, one or two sentences, one button |
| Closed by | Moving away, or the Esc key | A button ("Got it", "Next") or a close icon |
| Comes back? | Every time the user hovers | It shouldn't, once dismissed |
Users treat tooltips as noise when they cover what they were about to click, come in a chain of ten, or hold a paragraph. A tooltip works when it doesn't overlap what the user needs, says one thing, and points at something they can act on now.
Hover tooltips also have an accessibility rule: WCAG 2.1 success criterion 1.4.13 asks that hover or focus content can be dismissed without moving the pointer (usually with Esc), can itself be hovered, and stays until the user moves away. Touch screens have no hover, so never put anything a mobile user needs only in a hover tooltip.
What are tooltips used for?
Tooltips have four common jobs in onboarding:
- Highlighting important parts of the screen, such as the navigation, so new users know where to start.
- Creating a focal point by dimming the rest of the screen, as Heap did with a vignette shadow (example 10).
- Announcing a change: a tooltip opened from a hotspot is quieter than a banner or modal.
- Reminding users of an unused feature that leads to the "aha" moment, as ClickUp did for custom columns (example 3).
When should you use a tooltip instead of a modal or a hotspot?
Use a tooltip when the message is about one element that's visible now and fits in a sentence or two. Otherwise, another pattern fits better. Ask in order:
- Is the message about one visible element? If not (a pricing change, a welcome, a new product area), use a modal or slideout.
- Does the user need it to continue? If yes, show the tooltip as a step. If it's optional, put a hotspot on the element and open the tooltip only when it's clicked.
- Does it fit in two sentences? If not, link from the tooltip to a help article or a short video instead of growing the box.
- Is this the third tooltip in a row? Then you're building a product tour. Keep only the steps that lead to the user's first result.
How long should tooltip copy be?
Shorter than you think: a title of a few words, one sentence and one button. This post long recommended staying under 180 characters; the tooltips in its screenshots (added in 2022) use far less:
| Product | Title | Body length | Button |
|---|---|---|---|
| Duolingo | None | 33 characters | None: tap the word |
| Candy Crush | None | 52 characters | Skip (the whole tutorial) |
| Google Chat | "Find and start chats" | 55 characters | Next |
| Evernote | "Add tasks to your to-dos" | 64 characters | Show me |
| ClickUp | "This is where the magic happens: Create new columns" | 82 characters | Got it |
| Figma | "Crop more easily with ⌘" | 93 characters | Got it |
| Heap | "New: Playbooks" | 98 characters | Close icon |
| Canva | "Ungroup the elements" | 106 characters | Tap to close |
Across all 11 texts (Canva, Evernote and Google Chat show two each), the body ran from 8 to 20 words, one idea and one action each. If your draft needs a second button or paragraph, it's probably a modal.
How do you make a tooltip?
You can code a tooltip, adapt an open-source library, or use onboarding software. Each trades money against time and control.
1. Code your own from scratch
You can build tooltips with HTML, CSS and JavaScript. The browser's own title attribute gives you a basic hover tooltip, but you can't style it, and keyboard and touch users often can't see it. A custom tooltip should follow the ARIA tooltip pattern (role="tooltip", linked to its element with aria-describedby).
Coding gives you full control and no subscription, but costs development time, then maintenance and bug fixing. Without a developer on staff, hiring one can cost more than a tool.
2. Use an open-source library
Libraries handle positioning, steps and highlighting for you:
A library is faster than coding from scratch and cheaper than a tool if your team has time, but developers still set it up and change it, and you build your own targeting and analytics. Check each licence before commercial use. Our guide to open-source onboarding libraries compares them.
3. Use onboarding software
Onboarding software gives non-developers a visual editor for tooltips, tours, checklists and modals, with templates and targeting built in. These are the four tools this post has always listed:
| Tool | Tooltip feature (per its pricing or product page) | Entry price, as listed in October 2026 | G2 rating, October 2026 |
|---|---|---|---|
| Appcues | Pins: persistent tooltips anchored to elements, on all plans | $3,600 a year (Spark, up to 1,000 MAUs, plus a $250 one-time implementation fee) | 4.6/5 (359 reviews) |
| Userflow | Tooltips, on all plans | $300 a month (Essentials, 1,000 MAUs, billed monthly; $240 a month billed annually) | 4.8/5 (125 reviews) |
| UserGuiding | Hotspots and tooltips; 10 active hotspots on Starter | $249 a month billed yearly (Starter, up to 2,000 MAUs); $349 billed monthly | 4.7/5 (781 reviews) |
| Userpilot | Spotlights, which the pricing page doesn't describe further | $299 a month (Starter, up to 2,000 MAUs; billing period not stated) | 4.6/5 (1,020 reviews) |
Prices and ratings were read from each tool's pricing page and G2 on 19 October 2026; the price comparison covers the rest. A tool saves code on every change, but you pay whether or not you ship new tooltips.
14 examples of tooltips for your next design
These 14 products got the most out of a pattern people love to dislike. The screenshots date from 2022, so the products may have changed. For SaaS-only examples, see SaaS onboarding tooltip examples.
1. Candy Crush
Candy Crush welcomed new players with a mascot, one contextual tooltip per screen and a large Skip button. The tooltip said "Swipe this candy to the left to match 3 of the same!", the mascot pointed at the candy, and a "Like this:" box pictured the result.
The board behind it is crowded, which is why one simple tooltip per screen works: there's never more than one thing to read.
2. Canva
Canva's mobile app showed an overlay tooltip while a user edited a design. A translucent purple shape covered the lower half of the screen and spotlighted one button, such as Ungroup or Effects.
A tap anywhere closed it; a tap on the circled button tried the tool. A tooltip this large works only because closing it is that easy. See the library entry.
3. ClickUp
ClickUp pointed existing users to a feature they might not use: a tooltip on the + icon after a list's columns, titled "This is where the magic happens: Create new columns", with a preview of the menu and a Got it button.
The preview does the explaining, so the body needs only one line.
4. CuePath
CuePath, a medication reminder service whose main users are over 65, put an icon hotspot next to its order button.
It catches the eye without blocking anything, and the tooltip it opens is easy to read.
5. Duolingo
In its first lessons, Duolingo asked users to tap words to see their meanings. A tooltip said "Tap on a word to see its meaning!" (33 characters), and tapping showed the translations at once.
Users tap because they need the meaning to answer: the tooltip answers the question they have at that moment.
6. Evernote
Evernote's app used tooltips to point at features a user might want, such as tasks: "Add tasks to your to-dos" with a Show me button, and a three-step series with dots and a Next button.
According to our library entry, Show me opened a short video, and tapping elsewhere dismissed the tooltip.
7. Figma
Figma showed a shortcut when a user opened the crop option: "Crop more easily with ⌘", with an image of the shortcut in use.
A close icon and a Got it button meant Figma never forced the shortcut on anyone: this was a tip, not an onboarding step.
8. Flourish
Flourish greeted users with a four-step welcome modal, then an onboarding checklist.
Each checklist step opened a guide made of tooltips, so tooltips appeared only when the user asked for that task.
9. Google Chat
Google Chat had one of the most basic tours: three steps, each with an image, a title such as "Find and start chats" and a Next button. A separate tooltip, "Google Workspace tools", later pointed at the options next to the message box.
Google kept that tip out of the tour and showed it where users start typing.
10. Heap
Heap combined three patterns to hold attention: a hotspot on the Dashboards menu item, a tooltip announcing "New: Playbooks", and a vignette shadow over the rest of the screen.
A hotspot and tooltip instead of a modal kept it low-pressure, and a close icon let users skip it.
11. Indicata
Indicata told users about a new feature and a new report in two different ways.
For the feature, a hotspot opened a tooltip with a short video; for the report, a modal appeared on the right. The pattern matched the size of the news.
12. Landbot
Landbot's mascot, also called Landbot, offered new users a product tour: "Want to learn how to build your first bot?", with "No, thanks" and "Yes, show me!" buttons.
The 11-step tour that followed felt shorter thanks to the mascot. One caution: the welcome line read "You've be given a 5-day PRO trial". Short copy gets read closely, so proofread it.
13. TimeSolv
TimeSolv's interface is complicated, screen by screen.
It used an eight-step series with a tooltip and a highlight for each region of the page, plus a Previous button.
14. Typeform
During initial onboarding, Typeform placed several hotspots around the editor at once (five are visible in the screenshot) and let users open whichever they liked.
Each opened one tooltip with one action, so users learned in the order they chose.
About the author
Selman GökçeSelman is a creative content writer with a full focus on onboarding and everything it entails including UX, product, growth, and more.
