Add a Badge, Hotspot or Label beacon to a tooltip and configure its position, inset and visibility.
A beacon marks the element targeted by a tooltip. Use it to help users find the tooltip without covering the surrounding interface.
Configure the beacon
- Open the tour in the visual builder and select a tooltip step.
- Open Behavior.
- Enable Beacon.
- Choose Type:
- Badge displays an icon.
- Hotspot displays a visual marker.
- Label displays your text.
- Choose the Position around the target element.
- Adjust Badge Inset, Hotspot Inset or Label Inset, depending on the type.
An inset of zero places the beacon on the element's border. The inset controls how far outside the target it is placed.
For a Badge, choose Info, Sparkles, Lightbulb or Question. For a Label, enter the label text.
Keep the beacon visible with the tooltip
Enable Beacon with step open if the beacon should remain visible when the tooltip is open. This setting controls visibility; it is not a menu for choosing URL navigation or custom-event click actions.
Test the result
Preview the tour on the target page. Check that the correct element is selected, the beacon remains readable, and it does not cover a control users need to click. Test a narrow screen as well as a desktop screen.
If the beacon is missing, check the tooltip's target and the Beacon switch first. Use the tour's results to review tour participation; the editor does not provide the separate beacon click-through and time-to-first-click reports described in older versions of this guide.