Your Tooltip should look and feel native, and Chameleon lets you adjust the styles to match your brand.

πŸ’‘Tip: To avoid confusion between your Tooltip and your interface, you should consider using contrasting/complementary colors for your Tooltips to help them stand out.

Default styling

The default styling for your Tooltips is set when adding your brand colors, but you can adjust individual styling components or make wholesale changes across your Tooltips from the Styling section.

Here you will have the option to change the following components:

  • Colors: Tooltip background, text, trigger icon

  • Fonts: family, default size. To learn more about this, see this article

  • Other: corner radius, trigger text/icon

  • Custom CSS: specify more precise styles. This is available on customer plans. If you'd like this feature, email us.

Any styling you adjust will appear in the example Tooltip on the right-hand side.

Note: If you are using Custom CSS this will take precedence for any other point-and-click styling changes you make from the Chameleon Editor directly.

Once you're happy with your changes, select in the dropdown whether to apply to:

  • New Tooltips (sets the new default)

  • All Tooltips

  • A particular Tooltip

For changes to any Live Tooltips, these will be marked as Edited and will need to be re-published before the changes are made live. This gives you the opportunity to specifically preview your Tour before deploying changes to users.

Change styling for a single Tooltip

In addition to changing the default styling, you can change the style for a specific Tooltip. The options you have include:

  • Tooltip background and text color

  • Button text and background-color

  • Corner roundness

To make these changes, click the component you wish to change (e.g. body, title, button, etc.) to see the customization options available.

The color palette will show you colors from the underlying page, to make it easier for you to match your brand, but you can also paste any HEX code, and it will be saved to your Custom color list, for easy access.

You can also use markdown formatting to change the size of fonts, or add links and bullets. You can also add emojis to help brighten your content πŸ”†

List of selectors

Below are example CSS selectors for Chameleon Tooltips and their components. You can use these to help guide which elements to target.

We recommend you test adding your own style settings in all cases.

/* New editor styles*/

#chmln .chmln-edit-modal .chmln-inner .chmln-header .chmln-title{ /* the Tooltip title */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-media-body .chmln-step-media { /* the style of the image or video */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-container { /* the style of the body content */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-container h4 { /* the style of a particular header size in the body */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer { /* the style of the footer area at the bottom of the step */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-action{ /* the style of the buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-button-primary { /* the style of all primary buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-button-secondary { /* the style of all secondary buttons */ }
#chmln .chmln-edit-modal .chmln-lightbox-highlight .chmln-lightbox-opening-row .chmln-lightbox-opening{ /* the style of the shroud highlight (a CSS shadow) */
#chmln .chmln-tooltip-<tooltip-id> .chmln-hotspot-spot { /* hotspot selector */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-pointer-highlight { /* the tooltip pointer */ }
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important; }

/*NOTE: box-shadow sizes over 2000px can be unpredictable on Safari and Firefox*/

πŸ‘‰ Have any questions or issues? Review the best way to get help.

Learn More

Did this answer your question?