Action-Driven Tooltips

As a guiding pattern, tooltips generally have a Next button that allow users to move at their own pace as they learn more about your platform. Occasionally you'll need your users to complete an action outside of clicking a Next button to progress through your tutorial. 

To reduce friction and avoid redundancy by asking users to select a button and click on a non-Appcues element in your platform, our action-driven tooltips will allow your users to progress through (or end) a tour without having to interact directly with a tooltip. 

Here's what a default tooltip looks like:

And here is an action-driven tooltip:

To create an action-driven tooltip: 

  1. Create a new tooltip flow or open one you've already created in your editor
  2. Select the element you want your action-driven tooltip to interact with - in the below example, users should click the Add Project button to close this tooltip

    *A quick note, make sure the element you are selecting is the whole entire button and not just the text inside the element

  3. Select the cog icon of your action-driven tooltip to display its settings. 
  4. Change the Advance this tooltip when... dropdown from "The Appcues Next button is clicked" to The element it's pointing to is clicked (hides the Next button)"

  5. Select the Save button in the top right of your tooltip settings

There you have it! You can make as many of your tooltips action-driven as you'd like on a step or flow level.

Still need help? Contact Us Contact Us