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.
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
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 🙂
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 Dashboard's sidebar menu.
Next, you'll be taken to your website where you will select a page element to anchor your Tooltip to. A blank Tooltip with the global styling options from your account will appear on page.
💡 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.
From this moment, you can use the Chameleon Builder to customize your newly-created Experience to the last detail. Go ahead and style your Tooltip similarly to how you'd do with all the other Chameleon Experiences.
Make sure to define how you want your Tooltip to be triggered -- you can do so from the Display Rules section of the Chameleon Control Panel.
Here, you can choose from triggers similar to those available for Tours, namely:
Page element click
Page element 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.
2. Publish your Tooltip
Great news -- your Tooltip is ready to be published!
Switch back to the Dashboard are your Tooltip styling will be saved here 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! 🚀
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.
Note: 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: