Tooltip step

Tooltip is the most basic step. It is a small card that appears next to an element on the page. It can be used to draw attention to a specific element, provide more information, or guide the user through a process by point and click.

General properties

Title

Bold text at the top of the tooltip used to introduce the step. Supports HTML.

Body

Main content of the tooltip used to provide more information about the step. Supports HTML.

Target element

CSS selector of the element that the tooltip should point to. The tooltip will be positioned next to this element and will follow it as it moves. If the target element is not found, the tooltip will not be shown and will wait for the element to appear until one of the following happens:

• User navigates to different page without target element showing up
• User refreshes or re-enters the page after 15 minutes of inactivity

After that the flow will fail and tooltip error will be tracked in the analytics.

Example: #my-button or .my-class

We recommend using unique classes or IDs for the target element to avoid conflicts with other elements on the page. If you can't add classes try to use the most specific selector possible. To find the right selector you can use the browser's developer tools see this guide (opens in a new tab) for more information on how to find the right CSS selector.

Tooltip placement

Position of the tooltip relative to the target element. The tooltip will try to position itself in the specified direction, but if there is not enough space it will automatically switch another direction. The tooltip will always try to stay in the viewport.

Supported values: top, right, bottom, left, top-start, top-end, right-start, right-end, bottom-start, bottom-end, left-start, left-end

Hide close button

If enabled, the close button will not be shown in the tooltip. This can be useful if you want to force the user to interact with the tooltip before continuing. Use this option with caution, as it can make the onboardings less user-friendly.

Hide arrow

If enabled, the arrow pointing to the target element will not be shown.

Overlay

If enabled, the target element will be highlighted with a semi-transparent overlay. This can be useful to draw attention to the target element. You can change the color and opacity of the overlay in the Style template on the project level.

Enabled by default.

Close on overlay click

If enabled, the tooltip will be closed when the user clicks on the overlay and the flow will end. This gives the users quick way to dismiss the flow if they are not interested in it.

Can be enabled only if the overlay is enabled.

Footer

The footer properties allow you to customize the footer buttons of the tooltip.

Wait

The wait properties allow you to control what should the tooltip wait for before continuing to the next step.

Advanced

Step ID

Unique identifier of the step. This is optional but can be useful for programmatic control of the flow.

Scroll to element

Enter CSS selector of the element that the page should scroll to before showing the tooltip. This can be useful if the target element is not in the viewport and you want to make sure it's visible before showing the tooltip.