When creating a Tooltip, you’ll choose an element on your website to target. Intercom then uses CSS selectors to identify the elements you have chosen.
As no two websites are alike, we have added a number of layout features that will help you deliver the best experience to your end-users. This ensures the Tooltip looks native to your application and doesn’t interfere with the user-experience you have designed.
Overlaid vs. Embedded Layout
When choosing a layout, you must first consider how the Tooltip will be inserted into your webpage.
This can be done by selecting one of the two layout options:
Overlaid - Overlays the Tooltip on top of the existing elements on the page.
Embedded - Is positioned in-line and moves elements on the page to make space.
Tooltip Alignment
The alignment that's selected will determine how the Tooltip gets positioned relative to the element you have selected, giving you greater control over where the Tooltip appears.
There are 3 alignments options to chose from:
Text in element - Aligns to text if it exists within the element.
Inside the element - Aligns (by default) to the right hand side of the element.
Beside the element - Aligns (by default) outside the element on the right hand side.
Further refine the alignment using the options to move the Tooltip alignment to the left, right, top, bottom, or middle. Use these controls if you want to move the Tooltip from the default positions.
Offset
For that final bit of tweaking, the offset controls give you the ability to move the tooltip left or right, top or bottom. These are particularly useful in cases where you want to get closer or further away from the element you are looking to highlight with the Tooltip.
What to do if you can’t get the Tooltip positioned correctly
If you’re still struggling to get the Tooltip positioned correctly there may be a few factors that are worth considering:
Does your product have elements with fixed widths - The element you’ve selected could have fixed widths applied by your developers. In this case, embedding a Tooltip may not render as you expect. Try speaking with your developer team to look at the HTML and CSS on the webpage.
Your product uses dynamically generated classes - The rendering might appear fine in the Tooltip builder but not-as-expected when you preview or test in the live environment. In this case, there is often some dynamic content that’s changing the layout of the page which moves the Tooltip to an unexpected position.
Try troubleshooting these issues by manually choosing the CSS Selector.
Got questions?
If you have any more questions about editing a Tooltip, just chat to us in the Messenger and we’ll help you out.
💡Tip
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts