Tooltips are brief, informative messages that appear when a user interacts with an interface. They’re triggered by a mouse or keyboard hover.
We show users in-product messaging, like tooltips, to give them additional information and guidance. They might be used to:
- Point out a new feature
- Guide the customer through a new experience, such as a setup flow or some part of the product they haven’t used before
- Help explain why the system needs to collect their data
- Help the customer complete a task
Guidance for content design is similar for mobile and larger display applications.
- Restrict content to 3 lines within each tooltip. Header = 60 characters max, body = 130 characters max.
- When introducing a new function, lead with a verb. For example,
Use this dropdown menu to select a payment method.
Be concise. Need help? Take a look at our tips for writing small.
Don’t include links. You’re already interrupting a customer’s workflow—don’t take them away from the task they’re trying to complete.
Don’t obscure other useful info.
- Posts from transactions only show data from linked bank accounts.
Be highly contextual and specific.
- Sets the default delivery method. The Delivery method default determines the way you’ll deliver sales forms to newly created customers. You can change the default delivery method for a customer by editing the customer on the Customer List. You can also change the delivery method when you create individual invoices or other sales forms.
Don’t explain an overview or entire task flow.
- Kick off the new year with a final look at 2021.
- Sign out has moved
Make sure tooltips have a limited lifespan.
Don’t include rich content, like images.
Use a period at the end of a tooltip only if it’s a complete sentence. Similarly, if any tooltip has a second sentence, all sentences in the tooltip require a period.
Tooltips shouldn’t be essential to completing a task. If what we’re really saying is, “To work around our broken experience, complete the following counterintuitive steps,” then a tooltip isn’t the best route to take.
Write in sentence case (yes, even headers).
Don’t use tooltips as a band-aid for poor design. A clunky tooltip could be signaling a bigger issue: that the team didn’t step back and align on what type of problem (content, interaction, or PD) they’re trying to solve.
Tooltips should be truly customer-focused and provide useful info.
Don’t use for marketing efforts, selling additional services, or conveying value props.
A guided tour is a set of ordered tooltips that demonstrate a new function or how to do a task. Users move through the content at their own pace.
Guided tours build on contextual help design patterns.
- Limit the series of tooltips to 3 or 4 (and only 1 for mobile).
- If a guided tour includes 6 or more tooltips, consider other ways of delivering the content, like a video tutorial or help article.
- Limit the number of guidance tooltips per screen. Too many can clutter the experience and makes the product seem harder than it is.
- Accessibility note: Be sure the experience works for customers who use screen readers. Avoid directional language, like “at the top of the screen” or “Select here.”
- Once the customer dismisses the tour (either by following it to the end or closing it) let them know where they can find the help content later.
Be intentional about tooltips and tours
Tooltips should be the exception, not the rule. Adding tooltips doesn’t create engaged users. Each tooltip creates friction: it has a cost. If the tooltip isn’t exactly what the customer needs at that moment, it becomes an annoyance, and a rapid succession of tooltips is a turnoff.
And not every feature change requires a message. Before you start writing, ask yourself:
- Is the design apparent enough that customers will know what it is?
- Is the tooltip burying essential information?
- Will the tooltip raise more questions than answers?
- Is the change immediately visible?
- Would the message point to obvious UI or define a field?
If you answered yes to any of the above, you probably don’t need a tooltip.