Tooltips are designed to provide in-flow information in a non-intrusive manner, based on a push or pull interaction from your end-users.

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 that is relevant to them in a given moment.

What should I use Tooltips for?

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

The best part? Since your Tooltips are triggered by your users, 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.

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

What should I avoid when creating Tooltips?

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 on 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 🙂

How can I create Tooltips?

Tooltip creation in Chameleon is designed to be as simple and straightforward as possible. Using our Tooltips product, you'll get your Tooltips published in just two steps.

1. Create a new Tooltip

Start by creating a new Tooltip from the Builder's sidebar menu. From this moment, you'll find a blank Tooltip is created with a placeholder name. Go ahead and style your Tooltip, similarly to how you'd do with all the other Chameleon Experiences.

Ideally, you should already be located on the page where you wish the Tooltip to be published, as your current URL will be fetched and added as a URL matching rule. However, 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 Actions menu (the clapperboard icon). You'll be presented with triggers similar to those available for Tours, namely:

  • None

  • Page element click

  • Page element hover

  • Icon click

  • Icon hover

👉 Learn more about triggering a Tooltip from an icon

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.

2. Publish the Tooltip

Great news -- your Tooltip is ready to be published!

Back to the Tooltips menu, make sure to rename your Tooltip to something recognizable and publish it! 🚀

Note: You can access the Tooltip options by hovering it.

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!

Discover more

Did this answer your question?