How to Create & Edit Action-Driven Tooltips
As a guiding pattern, tooltips generally have a 'Close' or 'Next' button that allows 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.
For example, you may have a tooltip pointing to a button, link, or tab in your platform that you'd like the user to click.
To reduce friction and avoid redundancy by asking users to select a 'Next' 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 by clicking only the element the tooltip points to, rather than an Appcues 'Next' button.
Here's what a default tooltip looks like (notice the next button):
And here is an Action-Driven tooltip:
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
Pro Tip: 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 next to the tooltip to display its settings.
4. Scroll a bit down to the 'Design' tab and find the 'Advancement' section, then select 'Click Target Element'
5. Your changes will auto save and you're good to go!
There you have it! You can make as many of your tooltips action-driven as you'd like, so feel free to get creative.
Reach out to us at email@example.com if you run into any questions =)