Tooltips offer a non-disruptive and contextual experience for educating and engaging customers in your product, so you can drive faster adoption. They’re ideal for drawing attention to new features and surfacing your other content to customers when they’re looking for it, such as showing an Article from your Help Center or kicking off a Product Tour.

Creating a Tooltip is fast and easy, and doesn’t require any code. Here’s how to get started:

First, go to Proactive Support from the main menu and click + New message in the top right corner.

Then, choose Tooltips as your content type.

You can also choose to start with a pre-made template by picking this content type from the left sidebar.

Next, give your Tooltips a short and snappy title. For example, if you’re announcing a new product feature, you could call it “Feature launch”:

To start designing a Tooltip, click “Add tooltips”:

A new window will open. Here, add the website you’d like to add your Tooltips to:

Note: This URL is just for selecting the right website - it’s not the target URL where you’ll show your Tooltip to customers. You can choose page and audience targeting rules in a later step.

Once you’ve added a URL, click “Open website”.

You can navigate to another page from here if this Tooltip is for a different page.

Now click “Add tooltip” to start designing your Tooltip on this page:

Choose an element on the page where you’d like to place your Tooltip:

You can use stylized text and add links, images, videos, code, bulleted and numbered lists.

Note: The following image and video formats are supported: PNG, JPG, JPEG, GIF, and MP4.

You can also use Smart Links to search for content you've already created in Intercom. For example, you could add a Smart Link to an Article in your Help Center which offers further information, or add a Product Tour you’d like to kick off from this Tooltip:

Icon - Select this if you want an icon to appear next to an element on the page.

No icon - Select this if you’d like the content to seamlessly appear when a customer hovers over an element.

Label - Select this if you’d like to add a label next to an element such as “New” or “Beta” for a feature in your product.

Icon type - Choose which type of icon you’d like to display, such as a beacon to draw attention to a new feature.

Icon color - Customize the color to match your brand or stand out on the page.

Show content on - Decide when the Tooltip should reveal the content, such as when a customer hovers over it or clicks on it.

Animated beacon - This will allow the Tooltip to flash slowly until a customer interacts with it, and then it will remain static.

Note: It’s possible to set the background color and text for all Tooltips you add here. Manage this from “Group settings”.

Use these controls to position or move your Tooltip exactly where you want it. You can play around with the following options:

Now click on “Placement” and decide whether you want the Tooltips to show sitewide (e.g. on headers or footers) or specific pages (e.g. only pages you choose).

To control which page(s) the Tooltips will appear, select “Specific pages” and click “+ Add new rule”:

Next, define the page URL your Tooltips should appear on. By default, this will be the website URL you selected at the beginning, but you can edit this rule and choose any page on your site:

Important: Make sure the page you choose has the element you’re placing the tooltip on.

You can also use ‘contains’ to be more flexible, like targeting groups of pages or pages that contain unique parameters (like user ID). For example, you could choose to target page URLs that contain ‘project’ to target customers when they’re working on projects.

Add as many page URL rules as you need to target the right pages.

Pro tip: It's a good idea to copy and paste the URL from your app or site directly, as this will catch any characters hidden in your browser's address bar, like trailing slashes.

Here you can change the element where your Tooltip is placed using the CSS Selector, or if you have very specific text on your page that you’re trying to place the Tooltip on, try searching “By Text” to find the exact element that contains that text.

Note: If element matching “By Text”, it will find the first element on the page which contains that text term.

Tip: If you're having trouble selecting the right element on your page, try manually choosing the CSS Selector.

When you’ve finished finalizing the placement of your Tooltips, go ahead and click “Done”.

You can now add more Tooltips to this group which will have the same rules and scheduling applied.

Note: If you want to create Tooltips with different rules and scheduling, you'll need to save this one and then design a new Tooltip.

Choose the frequency that these Tooltips should appear and set consistent background colors under the “Group settings”:

Frequency:

Choose whether these Tooltips should continue to show every time they meet the audience rules, or if they should show until engaged with and then disappear. This is great for feature announcements or to drive awareness.

Background Colors:

You can also set a background and text HEX color for all Tooltips you’ve added here. This is ideal for tooltips which need to match design guidelines in your product.

When you’ve finished managing group settings, click “Save and close”.

When you are editing a Tooltip group, you can see in the bottom toolbar:

Note: if you edit a Tooltip that is not on the current page, you will see the Tooltip float in the middle of the page with a banner error.

Here is an example of a Tooltip group displaying the different settings for the individual Tooltips.

We recommend testing your Tooltips in the following ways before setting them live for customers:

1. Test as a new user

If you’ve added Tooltips for new users, you should sign up to your product from scratch and test your Tooltip as a real new user. This will ensure your Tooltip works when your product is completely fresh, with no existing data.

2. Test with all your different product permissions

If your product has different permission levels, i.e. basic, admin, super admin; you should test your Tooltip as a user with each of these different permission levels. This will ensure your Tooltip works for every type of user. It will also ensure your Tooltip has been added to pages every user can access.

3. Test that your Tooltip works with and without product content

If your product can be filled with user generated content, you should make sure your Tooltips work with and without content. You should test empty states as well as your product with content.

You can use audience targeting rules to allow only you or your teammates to preview Tooltips and ensure they’re working as expected. For example, we can select users where “Email contains examply”:

Then set the Tooltips live and visit the webpage where you added them to see them in action:

If you’ve set your Tooltips live and they're not showing, make sure you’ve checked the following:

If a Tooltip is showing but not in the right place, you can edit the layout and positioning.