We try to make it really easy to place tooltips and hotspots, but there's actually quite a bit going on under the hood. 

TOOLTIP POSITIONING 

When you a place a tooltip we provide a selector that highlights the page element where said tooltip will be attached. By default it will be placed at the top, above the element. You can use the arrows around the tooltip to reposition it to the left, right or bottom of the element. 

If you're not seeing an arrow, this is because there isn't enough space to fit the tooltip. If you resize the tooltip, it may automatically switch position to fit its new size on screen. Your users screens and resolutions will greatly vary. Tooltip will automatically be repositioned relative to its page element, if there are screen limitations. 

HOTSPOT POSITIONING

While you won't see a page element selector when placing hotspots, they are essentially placed in the same way as tooltips. We will look for the nearest page element, and attempt to place the hotspot as close as you've positioned it. This works most of the time on most pages. That said, layout code of your page can be implemented very differently. You can use provided arrows around the hotspot, as well X- and Y-axis windows, to adjust the position.

TROUBLESHOOTING

Working on top of various sites is hard. Layout code implementations vary wildly. If you run into a situation where you place a tooltip or hotspot, but it gets misplaced during playback, there's a solution.

For these cases we've created a fail-safe mechanism, allowing you to override our initial positioning. Head over to Settings > Position where you'll find a field to enter the CSS selector for the page element where you'd link to link your hotspot or tooltip. 

Ideally, we're looking to a unique class or ID. Your development team would be the ultimate source of truth on the best selector to use. We can also try to help you here, so feel free to reach out to us.