How to Implement In-place Tooltips to Drive Feature Discovery & Adoption

Wondering how to implement in-place tooltips to provide customer education and boost retention?

You’ve clicked on the right link. This article will show you:

• How tooltips work and why they play a key role in SaaS growth.
• Steps to build your tooltips.
• Tooltip text and design examples from top-performing SaaS companies.

TL;DR

• Tooltips are interactive elements of a user journey aimed to showcase features and walk users through your product. They can exist as single tooltips or as part of a flow, depending on your objectives.
• Tooltips help to improve onboarding, streamline product adoption and educate users on how to use your product and gain value.
• There are three ways to create tooltips: code from scratch, use low-code solutions (open-source frameworks), or use no-code product adoption tools like Userpilot.

Some advantages of using a no-code tool for creating tooltips:

• It’s easy and doesn’t require technical knowledge.
• You’ll have access to quick customization options.
• You can A/B test different tooltip iterations at high speed and conduct related product experiments.
• The right tool will allow you to trigger tooltips for any on-page event and target a specific audience, domain, or web pages, and set priorities.

Some tooltip use cases:

• User onboarding – You can trigger tooltips for first-time customers to show them around.
• Feature discovery and activation – Tooltips help customers discover necessary features.
• Contextual tooltips to remove friction along the user journey.
• Contextual tooltips to drive account expansion.

What is a tooltip?

Tooltips are interactive elements of a user journey aimed to showcase features and walk users through your product. Depending on the context, this UI element can be used alone or as a series of tooltips creating an interactive walkthrough for first-time users.

Traditional tooltip is triggered by user clicks or as a hover text when users move their mouse over areas of the product that have the tooltip. However, some tooltips these days can be triggered immediately after a user lands on a page for the first time or when they finish interacting with a specific element.

The advantages of using tooltips

While tooltips aren’t always suitable for all in-app communication, they still play a vital role. Below are some of their advantages:

Improve user onboarding with contextual tooltips prompts

Well-placed tooltips can improve your user onboarding process and help customers settle nicely into your product. Your tooltip should be placed near the object of interest, usually at the pointer’s tail or head if possible; never put it in a way that interferes with what the user is doing.

Ideally, your onboarding tooltips should only appear when the user is using the tool for the first time. However, you can have persistent tooltips for features that could be confusing. This category of tooltips is mostly unobtrusive, only showing when the user moves their cursor over the element.

Streamline product adoption by showcasing new features

Product adoption is a key activity in the user journey and often makes the difference between churn and retention.

When used properly, multiple tooltips can guide users to discover new features and make the most of your platform.

Educate users with product tour tooltips

Product tours are effective for helping users realize the value of your product and what they can achieve with it.

A good product tour cuts to the chase and ensures customers are motivated to start engaging with your product.

There are two ways to go about it: use linear product tours that bore your users to tears. Or use tooltips to create walkthroughs with interactive content. The latter is more engaging and increases your likelihood of hitting high activation rates.

How can you create tooltips without coding them from scratch?

You essentially have three options for building tooltips:

• Build from scratch using CSS, Javascript, or HTML. This option is for you if you want limitless freedom for customization. However, keep in mind it’s the most time and cost-intensive. It also costs quite a lot.
• Use open-source frameworks. With frameworks like Opentip, Tooltipster, Simptip, etc., this option is relatively easier. But you’ll still need some tech savviness to get it done.
• The third option is to use digital adoption and product growth platforms like Userpilot to create tooltips code-free.

This third option is best for companies that would rather have their engineering team work on more important projects than spend weeks or months creating the perfect tooltip. If that sounds like you, then it’ll interest you to learn how to create and customize code-free tooltips with Userpilot.

You can watch the video below to get a quick feel for how easy it is (if you’re wondering, Campfire is Userpilot’s demo app):

Here’s a step-by-step guide too:

Step 1: Log in to Userpilot and launch the Chrome Extension Builder

Click on “Create New” after launching the Chrome extension. You’ll see a pop-up asking what you want to create. Select the option for building flows.

Step 2: Select an HTML element to create a tooltip

You’ll get an option to choose the page to start building your flow. Leave it as it is if you’re on the right page. Otherwise, simply navigate to the page you need to work on.

Click the button that says to add UI patterns and select “tooltip” since that’s what we’re building. After that, you’ll get a prompt to choose the different HTML elements you want the tooltips to appear on.

Step 3: Customize your tooltip

Userpilot offers flexible customization to ensure your in-app communication is top-notch. You can play around with the colors, box size, placement, font, theme, etc. There are also options for adding emojis and embedding images and videos—all to enable you to deliver a delightful experience.

Remember, the user isn’t in a lecture room, so you don’t have to be all serious. Making your tooltip fun can increase engagement rates.

Step 4: Choose when to trigger the tooltip

Depending on the experience you want to deliver, you can choose if the tooltip should be triggered after a hover or when customers click on the element.

You also have the option to make the tooltip skippable or not.

Step 5: Create a series of tooltips if needed

It’s simple: Return to navigation and click the green button that says “ADD.”

Select what you want (add tooltips or different UI elements that suit your purpose), and begin customizing it as you like.

Step 6: Review and push live

Like every builder, Userpilot lets you preview your flow and make any needed changes before rolling it out to customers.

The advantages of using a tool for creating tooltips

Without even trying to be biased, the benefits of using a no-code tool for your tooltips are enormous.

A specialized third-party tool allows you to:

• Easily change the specified position of a tooltip to determine its best position.
• Experiment with the tooltip text string to save space.
• Customize tooltips to match your branding. The tooltips will be easy to edit, so you can quickly change colors or sizes.
• Create a sequence of tooltips, interactive product tours, and feature walkthroughs.
• Have access to pre-built templates with modern designs that are easily customizable.
• Embed videos and images into UI patterns.
• Make tooltips trigger for any on-page event and target a specific audience, domain, or web pages, and set priorities. This is hard to do when you’re coding from scratch.
• Track performance and analyze the results to understand how your users interact with them.
• A/B test different tooltip iterations at high speed and conduct more product experiments.

Best tooltip text and design examples

This article will be incomplete without practical tooltip examples from SaaS brands like yours. Below are four to inspire you!

User onboarding tooltips

Kommunicate uses tooltips in its onboarding flow to showcase what each menu item is and how the features help new users.

Notice how short and to the point the tooltip texts are. Also, the right colors were chosen to match the brand colors. If you think the color matching isn’t a big deal, then you probably haven’t used a platform with so many mixed-up colors.

Introduce features that your users haven’t used yet

Your customers can get used to using your software in a particular way that will unknowingly neglect important features. It’s your responsibility to draw their attention to unused features, and tooltips help to do that.

Here’s an example from Ahrefs:

Another important use case for this is new feature announcements. Don’t wait for users to discover what’s new—some never will. So, save time by using tooltips to notify them.

Contextual tooltips to remove friction

For both new and existing customers, using a new feature for the first time comes with a level of uncertainty that soon creates friction. Help your users overcome this by triggering contextual tooltips when they need them.

In the example below, some users might not be familiar with the symbol used, but adding that tooltip will save them from trial and error.

Add a contextual tooltip element and drive account expansion

Upsell opportunities exist throughout the customer journey, but whether you make the most of it or not largely depends on the timing of your prompts.

A best practice is to trigger your upsell message when customers need what you’re selling the most.

Notice how Harvest uses a contextual tooltip to convert free users to paying customers. This approach is better than sending random emails that try to upsell users out of the blue.

Conclusion

Tooltips help to drive user engagement and boost retention, but they can have counter effects when you don’t use them the right way.

How to maximize this UI element:

• First, ensure a tooltip is the best for the result you want to drive.
• Create a tooltip (or tooltips) using a simple design and catchy microcopy.
• Don’t let the tooltip clutter your UI.
• Avoid triggering it in a way that interrupts users and distracts them from the path they’re on.

Now that you’ve learned how to implement in-place tooltips, it’s time to start practicing. Book a demo with our team to get started!