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:
Design your Tooltips
First, go to Outbound 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.
Note:
Tooltips are specifically designed to work with desktop web apps and are not supported on native mobile apps. For educating and engaging customers on your mobile app, Mobile Carousels.
You can add multiple Tooltips at once by adding them to the same group.
These will have the same audience targeting, scheduling and goals applied. It’s great for grouping all onboarding Tooltips together for new customers, or grouping educational Tooltips to support a particularly complex part of your product.
You can create 100 Tooltips per group and 50 groups in total.
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”:
Choose a site to add your Tooltips on
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:
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”.
Choose where to add your Tooltip
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:
Add content to your Tooltip
You can use stylized text and add links, images, videos, code, bulleted and numbered lists.
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:
Note:
Smart Links only find live (published) content you created in Intercom and they ignore any targeting rules you’ve set on that content.
Content triggered by a Smart Link won't be delivered when previewing a Tooltip in the editor.
Style your 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.
It’s possible to set the background color and text for all Tooltips you add here. Manage this from “Group settings”.
Choose the right layout for your Tooltip
Use these controls to position or move your Tooltip exactly where you want it. You can play around with the following options:
Overlaid - This Tooltip will float over the element (like the Messenger).
Embedded - This Tooltip will render in line with your HTML so can adjust the layout of your page.
Align to - Move the Tooltip to be in line with the text in an element, beside the element, or next to the element. You can also adjust whether it sits to the left, right, top, bottom, or center of the element.
Offset - Get even more precision by offsetting the pixels padding the Tooltip.
Placement settings
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:
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.
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.
Element matching
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.
If element matching “By Text”, it will find the first element on the page which contains that text term.
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.
If you want to create Tooltips with different rules and scheduling, you'll need to save this one and then design a new Tooltip.
Managing frequency and background colors:
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.
Frequency is applied to all Tooltips you’ve added here and can’t be set for individual Tooltips.
Tooltip engagement is tracked by browser cookies and not by user account, so if your users do any of the following actions, they will see the Tooltips they previously engaged with again:
Use a different browser or device
Clears their cache and cookies
Logs in through incognito window
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”.
Editing Tooltip groups
When you are editing a Tooltip group, you can see in the bottom toolbar:
All the Tooltips included in the group.
How the Tooltip is tagged - whether it is a CSS Selector or Text Element
Where the Tooltip is showing - sitewide or on a specific page
Whether the Tooltip is on the current page.
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.
Test it in a live environment
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:
Troubleshooting
If you’ve set your Tooltips live and they're not showing, make sure you’ve checked the following:
The correct page is selected under Placement settings.
The webpage URL hasn’t changed.
Dynamic elements aren't changing the layout of the page. Find out how to fix this.
If a Tooltip is showing but not in the right place, you can edit the layout and positioning.
If you’re element matching “By Text” and have selected “Sitewide” under Placement settings, it will likely match on pages with that text anywhere. Try using a CSS Selector for element matching this Tooltip instead.
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts