Skip to main content
Understanding Tooltips

Discover everything you need to know to get started with Tooltips.

Tiago Mota avatar
Written by Tiago Mota
Updated over 2 weeks ago

Tooltips are user-triggered interface elements that provide contextual information about specific features or concepts in your product.

Being a dynamic user experienceโ€”a component that shows and hides interactivelyโ€”it is meant to be a subtle UI hint that, upon interaction, will provide your users with extra information relevant to them at a given moment.
โ€‹

A Tooltip example with an icon trigger


Availability & Usage

๐Ÿ” Unlimited Tooltips for all plans

โš™๏ธ Different Triggers available in the Builder


The great thing about Tooltips is that they fit a very wide range of use cases. Being a short-lived and contextual form of annotation that the user triggers, it will always be successful in capturing users' attention by highlighting specific features of your product.

The best part? Since your users trigger your Tooltips, you already have the first sign that they want to know more. Therefore, Tooltips can be instrumental in highlighting particular features and providing in-depth explanations without crowding your UI and overwhelming your users.

Here are a few specific use cases where you can use Tooltips:

  • Onboarding new users

  • Driving feature adoption

  • Explaining taxonomy or specific concepts

  • Providing contextual advice and help


By now, Tooltips might seem like the ultimate tool for feature highlighting and in-flow explanations. However, when Tooltips are poorly conceived, they can become overwhelming, distracting, and even annoying.
โ€‹
Pulkit, our co-founder, has put together a helpful video showcasing some of the best practices surrounding Tooltips (with great live examples) and what to avoid when creating them -- find it below!

In the video, Pulkit highlights five essential rules for creating great Tooltips:

  • Consider each Tooltip as product friction

  • Explain only non-obvious things

  • Make it contextual to user actions

  • Use only one at a time and no more than three or four in a row

  • Analyze, test and iterate

Make sure to give it a watch before deploying your Tooltips ๐Ÿ™‚


๐Ÿ‘‰ Check out this demo to explore configuring a Tooltip:

There are just a couple of steps to create a Tooltip and get it published in your app, with Chameleon.

Pick Tooltips from the Dashboard's left-side menu, and hit 'Create a Tooltip'

Clicking 'Create a new Tooltip' from the Dashboard & 'Select anchor element' gif


Next, enter your app's URL to enter the Builder and build it, to ensure it is contextual and useful to the last detail. The styling will be the same as your global account styling, but you can adjust that in the Builder. ๐Ÿ˜‰

The Builder will open on your website and you will be prompted to select an element on the page to anchor your Tooltip to.

Once you select an element, you can adjust the Pointer so the feature you want to highlight is not obstructed and is comfortably accompanied by your Tooltip. You can choose to anchor to the center of:

  • The selected on-page element

  • The Canvas body of your Tooltip.

Pointer options the Chameleon Builder


You can also remove the Pointer altogether if you're targeting, for example, larger content blocks and want to use the Tooltip as a guiding header in case of more complex features.

๐Ÿ’ก What defines a Tooltip? Contextual positioning and subtle display. You can also use Tours to create Tooltips, by adjusting its Step position, adding a Pointer, and the right trigger for it.

Use the Builder options to create an on-brand Tooltip. Add your copy and adjust its look and behavior to fit your brand and users' needs.


โ€‹In the Builder, you can:

๐Ÿ’ก You can configure your Tooltip to show on a different page by adjusting the URL matching criteria as you would for any other Chameleon Experience.


Make sure to define how you want your Tooltip to be triggered -- you can do so from the Display Rules section of the Builder.

On-page Trigger options from the Builder gif

Here, you can choose from triggers similar to those available for Tours, namely:

  • None

  • Page element click

  • Page element hover

  • Icon click

  • Icon hover

When you're satisfied with the way your Tooltip performs, go ahead and preview it from the Builder. Iterate based on your impressions until you're happy with the result.
โ€‹

Great news -- your Tooltip is ready to be published! ๐ŸŽ‰

Switch back to the Dashboard, and your Tooltip styling will be saved and ready to go live.

Go ahead and pick the Environments your Tooltip should display in, select your audience Segment, and finally publish your Experience! ๐Ÿš€

Choose an Environment, Select audience, at the Review & Publish steps in the Dashboard

๐Ÿค Make sure to always test your Tooltips live to ensure they're displaying correctly and are performant. Share it with colleagues to get their impressions, also!

Anytime you want to update a live Tooltip, all you have to do is find it in your Dashboard. Go to the 'Edit Tooltip' tab, and you'll be able to adjust it as usual. Don't forget to apply your changes so users can see them, too ๐Ÿ˜‰.


Say you wanted to add a Tooltip that displays a link to your Intercom messenger any time someone hovers on a "Contact Support" button that is natively built into your app.

First, set the Position of your Tooltip based on any one of these elements. Then, click "Adjust element" and remove or edit the identifiers under "Specify your element further:" until they are general enough so they match all the elements on the page.

In this example for "Contact Support", you might remove all identifiers other than " Text contains 'Contact Support' " and " Type is 'button' " because that should always match where you want the Tooltips to appear.

โ„น๏ธ This can only be done for 'hovering' or 'clicking' on an element and does not apply when using icons.

Here's another example demonstrating how this can be done:

Note: This video does not show the latest version of our product. We will soon update all our videos to fit our new style and improvements. ๐Ÿ˜Š


Discover more

Did this answer your question?