When creating a Tooltip, you can choose specific website elements, like buttons or headers, to add your Tooltip to. Intercom uses CSS selectors to let you choose these elements.

When you choose an element, the Tooltip will automatically generate a CSS Selector that tells it where it should be added to the element. You can see the CSS for the selected element in the bottom right corner under Placement > Element matching:

You may want to manually add the CSS Selector for a few reasons, which we'll cover later in this article. If you’d like to manually edit the CSS Selector that’s automatically chosen, simply click inside the field and enter the CSS Selector you’d like to select:

There a couple of reasons you might want to edit the CSS, when choosing a website element:

If your product or site has changed since you published your Tooltips, you may find the original CSS no longer works. This might be either because the element it references doesn’t exist anymore, or it has moved to a significantly different place. In this case, you can choose to select a new element using the “Change Element” button, or manually enter a new selector.

CSS is used to apply styles to elements on your website. Some web frameworks dynamically generate the CSS classes to apply these styles. This means that the CSS selectors may change every time a user accesses your product or site. In this case, you won’t be able to use the automatic CSS Selector to add your Tooltip.

You can edit some of the selectors to use a wildcard so that it ignores the dynamically generated piece of the CSS Selector. This means editing the CSS to only select a part that is generic to all users. In the example below, we edit the selector to look for "button__" rather than "button__2kbli", given the "button_" part of the CSS appears to all users.

The best way to ensure your Tooltip displays correctly is to annotate the HTML on your site with a special attribute that Intercom can look out for.

Note: You’ll need to edit HTML to do this.

If you know what elements on your site you want to use in a Tooltip, you can add the special data attribute data-intercom-target="..." to these elements.

For example, if you wanted to point to your start button for a Tooltip, you could add data-intercom-target="Start button" to this element. By annotating your HTML in this way, it’s much more likely that small changes to your product will have no effect on your Tooltips.

Note: If you annotate the HTML as shown above, then, the Tooltip builder will be able to highlight the elements with the data-intercom-target annotation so you can select them.

If you have any more questions about editing CSS in Tooltips, just chat to us in the Messenger and we’ll help you out. Here are more ways to test your Tooltips and ensure they’re working as expected.