In Chameleon, you can create Tooltips that are everpresent or triggered by the user through click or hover. Creating an action-triggered Tooltip is a good way to communicate non-intrusively and provide additional contextual help.

Tooltips are a great tool for guiding your end-users and providing valuable, contextual information. In Chameleon, you can create Tooltips that are displayed on your page when someone:

To customize your Tooltip display options to be triggered by icons, you need to set an On-page Trigger from the “Display Rules” section of your Builder.

Next, pick the 'Click on icon' or 'Hover on icon' option, and you can further adjust each option.

The two different options refer to how the Tooltip is displayed to your end-users, and you should adapt them to your product needs. If you want people to check out a new feature, you can direct them to learn about it by displaying an icon they can click on to learn more.

💡 This is a way you can provide relevant self-serve help that nudges users to learn more or try out a new feature when it’s live.

In other cases, you want the invitation to be accurately contextual and allow users to discover features at their own pace. Using the “Icon Hover” trigger action with your Tooltip ensures that users will discover your Tooltip whenever they take their mouse over the icon.

💡 This is a good way to deliver “pull” help to users. By making the Tooltip display only when a user is interacting with a relevant section, and he is ready to learn more on his own.

Yes! For the multitude of cases when you want to use an icon-triggered Tooltip, you also want to adapt the visual style of this basic functionality to fall perfectly in line with your interface.

After you decide on a trigger type you can customize each icon-trigger as follows:

With this option, the Tooltip’s pointer can be anchored to the center of the element (in this case the icon trigger), or the canvas (the background). You can adjust its position with the X and Y axis offset.

This way you can make sure you help users discover new things about your product, and not obstruct anything they might be interested in.

🎓 You can read more about positioning your Experiences with Chameleon, here.

A minor, yet essential detail is styling the icon to fit your interface and attract the right kind of attention. Adjusting the icon’s color and style is a key step in making sure it blends in seamlessly.

Because icon-triggered Tooltips are such a powerful guidance component, you should customize them to match the user’s intention and your end goal.

Regardless if you choose to have it triggered by clicking or hovering, you have several predefined icon types that you can choose from to match it with your guidance.

With Chameleon, you have several predefined icon types that you can choose from to match your event. These icons are common templates that signal:

🎯 You can always upload your branded icons for higher recognition and style accuracy.

This way, you will achieve a perfect match between your Experience, brand styling, and user goals.

You can create icon-triggered Tooltips to draw attention to product changes, essential features, or provide quick snippets of valuable information. All done in a way that will not distract or annoy your users.

Tooltips are a good way to get started with small, but valuable steps in your users' education. They don't require complex configuration, and because of their inline nature, they should be styled simply.

Use them:

These are just a few examples where Tooltips make a great helpful buddy! Help users learn how to make the best out of your product at their own pace. Without creating a distraction or a need to dive into a learning experience.