Best Practices for Hotspot & Tooltip Placement

How Hotspots & Tooltips are anchored to an element on the page

When building hotspots and tooltips, you will be anchoring them to particular elements on the page. In our Chrome extension, the targeting interface will highlight elements on the page (indicated by the blue box) to help you select your tooltip's element.


Once you select your element, the relative position of the tooltip will be saved. This position is a percentage of the distance from the left side of the element and the top of the element. You can further fine tune your tooltip's positioning in your tooltip's Placement settings:

Below is an example of how changing the Left and Top percentage values will re-position the tooltip on its element.

As a general rule, it's better to anchor to smaller elements inside of larger elements, rather than the larger "container" elements on screen.

This will ensure that your hotspot or tooltip adjusts its position with respect to the smaller item for different browser window sizes, rather than larger items that are more likely take on more or less width as the browser size changes.


In addition to positioning, your tooltip will also have a  CSS selector value, which the Appcues SDK will use to find the element on the page when it will show live. To see the current value saved, or to make changes to selector value, click on "Manual" under the Target Element settings:


There are instances where CSS selector values aren't the most durable way to find an element on the page (for example, dynamically generated CSS classes or web apps that don't use classes and IDs on elements). In such cases, you can add additional criteria to your tooltip to help choose the right element on the page. These additional criteria can filter elements by text and by order on the page.

In the below example, we have a selector value of "H1", which matches 13 elements on the page. We can target the H1 element for Roboto by filtering with an order value of 1, which will find the 1st H1 element on the page. Alternatively, we can target the H1 element containing the text "Roboto" using the filter by text option.


My tooltips or hotspots are showing above something else. How can I fix it? To modify this you'll need to use our z-index over ride. You can learn all about this here!

How can I make a hotspot persistent? At this time this isn't a feature we offer. Please let us know here if this is something you'd like to see in the product!