All Collections
Creating Experiences
Display Control
Creating an icon-triggered Tooltip
Creating an icon-triggered Tooltip

Learn how to create a Tooltip that is triggered by hovering or clicking an icon

Tiago Mota avatar
Written by Tiago Mota
Updated over a week ago

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.

Quick access

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:

  • Clicks on an icon

  • Hovers over an icon

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:

  • pick an icon to trigger this Tooltip

  • adjust its placement and width

  • change its color

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:

  • Additional information about your product or a new feature

  • Alerts, hotspots

  • Key product moments: Beta, Upgrade, New or Update

  • Location, alerts, and add-ons

🎯 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:

  • where users get stuck because they may not understand specific actions or terms

  • with more complex features, to provide extra guidance

  • to nudge towards an expected behavior

  • to reveal moments of value that are otherwise easily ignored

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.

Read more about

Did this answer your question?