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 self-guiding your end-users and directing them to different actions or to new behaviors. 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 user-triggered, you need to set an On-page Trigger from the “Display Rules” section of your main panel.

Stay contextual with “Icon Click” or “Icon Hover”

The two different options refer to how the Experience 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 (or element) 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 Experience 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.

Can I style the icon?

Yes! For the multitude of cases when you want to use an icon-triggered action, 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 and select an icon style, you can then adjust the icon’s appearance to blend in.

Position, Position, Position

You know it, and they’ll notice it. It’s all about positioning your Experience the right way, being relevant, and non-intrusive. You can adjust the placement of your icon in relation to the element that your Tooltip is anchored to, as well as its width.

When you set the Icon to be the on-page trigger for your Tooltip, the Tooltip’s pointer will be anchored to the position you choose for the icon, in relation to the element that it is anchored to. 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.

Style it all

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 is a key step to make sure it blends in seamlessly. Chameleon automatically detects the colors from your page and will add them for you to use. You can also add your custom brand colors.

Because icon-triggered Tooltips are such a powerful contextual help, you should customize their appearance and behavior 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 event.

💡If the current icon templates don’t fit your Chameleon Experience, you can upload your custom icon to use.

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

🎯 Although the global styling options from your Chameleon Dashboard are the best way to control your brand’s visual coherence, don’t be afraid to go into your Experiences and tweak every component for a native look.

When should I use icon-triggered Tooltips?

You can create icon-triggered Tooltips to draw attention to product changes, essential features, or events. All done in a way that will not distract or annoy your users. This way you can also 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.

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

But we suggest you get specific and creative. If the Chameleon templates don’t work for you, upload your custom icon and style it to match your Experience.

Read more about

Did this answer your question?