Tooltips and Hotspots are element-anchored patterns that point users to specific parts of your UI. For an overview of all four pattern types and when to use each, see Flows overview. For help attaching these patterns to elements, see Place Tooltips and Hotspots.

Tooltips

Tooltips direct users through a sequence by pointing to specific elements — "click here, then here." Use them for guided walkthroughs and step-by-step product tours.

Each Tooltip attaches to an element using a CSS selector. The Builder highlights the target element in green when you place the step.

Hotspots

Hotspots are passive guideposts. They mark areas of your UI with a beacon that users expand on demand. Use them for feature discovery, on-demand help, or highlighting UI changes.

Hotspots in the same step group all display simultaneously on the page. Users can expand them in any order. The group is complete once every Hotspot has been expanded.

"Next" buttons aren't supported in Hotspots. Because grouped Hotspots appear at the same time and can be explored in any order, there's no sequential "next" action.

Configure the beacon

Both Tooltips and Hotspots display a beacon — the visual indicator attached to the target element. Beacon options differ by pattern:

Set the global beacon style (icon, color, animation) in your Theme under the Tooltips & Hotspots configuration.

Configure background color

Set the background color, font color, border radius, and shadow for Tooltips and Hotspots in your Theme.

Configure the backdrop

Backdrops are supported on Tooltips only — not Hotspots.

Three options are available in the Builder:

• No backdrop — the user can see and interact with your app.
• Soft backdrop — dims the area around the target element. Users can still click outside.
• Hard backdrop — blocks interaction with your app. The user must interact with the Tooltip to continue.

Adjust the horizontal and vertical padding and border radius in the Design tab. To change the backdrop color or opacity, add custom CSS using the .apc-spotlight selector.

Make a step skippable or required

Tooltips and Hotspots support two skip options in the Builder:

• X button — adds a close button in the top-right corner. Supported on Tooltips only (not Hotspots).
• Dismiss link — adds a "Hide these tips" link to the Tooltip or Hotspot content.

When a user clicks either option, Appcues fires step_skipped and flow_skipped events and ends the Flow. Customize the dismiss link text and styling with custom CSS in your Theme.

For details on how skip behavior interacts with backdrops, see Make Flows skippable or required.

How Tooltip progression works

Tooltips progress in two ways depending on whether the step has a button:

With a "Next step" button: The Flow advances when the user clicks the button.

Without a button: The Flow advances when the user clicks the target element the Tooltip is pointing to. This creates action-driven Tooltips — the user must interact with the actual UI element to continue.

If there's no button and the Tooltip is the final step in the Flow, clicking the target element completes the Flow.

How Hotspot progression works

Hotspots in the same step group appear on the page at the same time. Users expand them in any order by clicking the beacon. Each Hotspot disappears after being viewed.

The Flow advances to the next step group only after all Hotspots in the current group have been expanded.

Example: A Flow has a group of 2 Hotspots followed by a single Hotspot in its own group. When the Flow starts, the first 2 Hotspots appear simultaneously. The third Hotspot only appears after the user has expanded both of the first two.

How step completion is tracked

For targeting conditions

Tooltips and Hotspots are tracked as "has been completed" — the step counts as complete only when the user interacts with it. In Studio targeting conditions, these step types show "has been completed / has not been completed."

"Show once" Flows that start with a Tooltip or Hotspot group keep appearing until the user interacts with all steps in the first group. The Flow isn't marked as "seen" until that group is completed.

For analytics

Tooltips are marked "completed" in analytics when the last Tooltip in the group is closed through one of these actions:

• Clicking a Next step button (on the last step in the group)
• Clicking the target element (if no button is present and this is the last step)
• Clicking a Go to URL button with "Mark flow in progress as complete" selected
• Clicking a Skip to Next Group button (completes the Flow when this is the last group)
• Clicking a Dismiss Flow button with "Mark flow in progress as complete" selected
• Clicking a Trigger Appcues Flow button

Hotspots are marked "completed" when the last remaining Hotspot in the group is expanded (clicked on). It does not need to be dismissed or collapsed — expanding the beacon is enough.

Hotspot completion can also be triggered by a custom button using:

• Go to URL with "Mark flow in progress as complete" selected
• Skip to Next Group (completes the Flow when this is the last group)
• Dismiss Flow with "Mark flow in progress as complete" selected
• Trigger Appcues Flow

Clicking the X or "Hide these tips" dismiss link does not count as completed — it fires a flow_skipped event instead.