Out of our 4 main flow patterns, Tooltips and Hotspots are the ones that guide users through your application! They're meant to catch the attention of your users to a particular element or area. Because of that, the Builder gives you control over where you want to attach these patterns to your application.

Tooltips

Next action pointers. Tooltips are best used to direct sequences and walkthroughs. With tooltips, you might point out a useful feature on your site or tell users where to click next.

Hotspots

Helpful guideposts in your product. Great for "passive" feature discovery. Use hotspots to provide your users with on-demand guidance or tips, or point out smaller UI changes.

Hotspots are unique in that you can have several visible on the page at the same time, although only one at a time can be expanded.

Background color

You can define the background color of your Tooltips & Hotspots in the Theme you're using. You can also set the main font color here, as well as the border radius and shadow of the container.

Beacon

Tooltips can either have no beacon, a Hotspot beacon (selected below) or a question mark beacon. Hotspots will have a Hotspot beacon by default, but can also have a question mark beacon.

You can set the global settings of your beacon, like the icon, color and the animation, on your Theme directly.

Backdrop

Backdrop settings are only supported in Tooltips. You can add no backdrop, a soft backdrop (as shown below) or a hard backdrop. The presence of a backdrop will block users from interacting with your application elements.

You can also adjust the horizontal and vertical padding for the backdrop as well as the border radius in the Design tab.

The backdrop color and opacity is set by default. If you'd like to change it, you'll need to add custom CSS to your application stylesheet using the selector .apc-spotlight

Skippable or Required

Tooltips and Hotspots patterns support skip options in the Appcues builder. This allows you to add a skippable X in the top right corner of your Tooltip (not support in Hotspots) or a Dismiss link. When a user clicks on ‘x’ or ‘Hide these tips’ we will end the flow and note the user's journey choices with a step_skipped and a flow_skipped event.

The dismiss link adds a ‘Hide these tips’ link to your Tooltip or Hotspot. The skip options can be further customized with custom CSS in your Theme.

Tooltip progression

There are two ways to use tooltips in a Flow. A tooltip can be used with a ‘next’ button or without any buttons, resulting in a different experience: 

• If a tooltip is used with a ‘next’ button, the flow will progress by clicking on ‘next’.

• If a tooltip is used without a button, the flow will progress by clicking on the element it's pointing to. These tooltips are action-driven.

Tooltip completion

In terms of targeting these types of steps in your settings pages, Tooltips are considered completed when the user has interacted with them, so in the UI, those types of steps will show up as “has been completed”. Continuing the Flow by clicking next, clicking the target element or dismissing the Flow will mark a Tooltip as having been completed.

In terms of analytics, Tooltips are considered completed when the last tooltip of the group is closed via the built-in "Next step" button (not the skip link or X button). They can also be completed with a custom button using any of the following actions:

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

Note: If there is no button on the tooltip with a “Next Step” action, then clicking the element to which you've anchored the tooltip will progress the flow to the next step. If this is the final step in the flow, the flow will then be completed.

Hotspot progression

Hotspots that are grouped will show simultaneously on the page. In the screenshot below there is a Hotspot group of 2 Hotspots and 1 Hotspot step group.

When this flow is live, the first 2 Hotspots will show at the same time on the page. These Hotspots can be expanded in any order and will disappear after being seen. The third Hotspot in the screenshot above will only show after the previous group is completed.

Due to this nature, ‘next’ buttons aren't supported in Hotspots.

Hotspot completion

In terms of targeting these types of steps in your settings pages, Hotspots are considered completed when the user has interacted with them, so in the UI, those types of steps will show up as “has been completed”. Continuing the Flow by expanding the beacon or dismissing the Flow will mark a Hotspot as having been completed.

In terms of analytics, Hotspots are considered completed when the last remaining Hotspot of the group is clicked on to be expanded. It does not need to dismissed or collapsed for the group to be considered completed, as long as the last Hotspot has been expanded. They can also be completed with a custom button using any of the following actions:

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