In this tutorial, we'll show you how to use triggers to fine-tune your walkthroughs, in particular, where you have dropdown menus in your UI.

For example, you have a walkthrough which requires users to hover over an assigned element to expand a menu, and then they should select among several options in the menu. What happens if they move their mouse out entirely and the menu closes? You might want to just revert back to Step 1 to prompt the user to expand the menu again.

We’ll create a walkthrough where there are three steps. Here's an overview of our plan.

1. Step 1: Prompt the user to expand a menu. We need one trigger for this step.
   • On mouse over, go to Step 2.
2. Step 2: Prompt user to select an option. We need two triggers for this step.
   • On click, go to Step 3.
   • On mouse leave, go back to Step 1.
3. Step 3: Final step! No triggers needed.

Create the walkthrough

• Create a new topic and select Walkthrough as the type. This will start with all the defaults of a step by step tutorial.
• Leave the topic as visible in the widget.
• Click Create topic to confirm adding a walkthrough.

Create three steps

• To start off, add three steps.
• Edit the content for each step under Step options.
• In this example we will use:
  2. Step 1 - Click to expand the menu.
  3. Step 2 - Now choose your option.
  4. Step 3 - Great, you did it!

Add one trigger in the Step options panel for Step #1

This will make it so that when the user expands the menu, the walkthrough will advance to the next step.

• Edit Step #1.
• In the Step options panel, assign the element to your top-level menu item.

• Choose the appropriate trigger which expands your menu, for example, hover or, in this case, click.

• That's it! The trigger will advance to the next step by default.

Add two triggers in the Triggers panel for Step #2

This will make it so the user either advanced to Step #3, or they revert to Step #1 if the menu gets closed.

• Edit Step #2.
• In the Step options panel, click Assign element and choose your dropdown menu.
• Add your first trigger. In this case, when the user clicks a specified option, go to Step #3.
  • In the Triggers panel, click + Add trigger
  • Edit the trigger: On Click, Go to Step #3.

• Assign element: Choose the element they should click.
  • Add a second trigger. In this case, when the user moves their mouse away from the assigned element, go back to Step #1
• Click + Add trigger to add a second trigger.
• Edit the trigger: On Mouse leave, Go to Step #1.

• Assign element: We don't need to assign the element, because it will use the step option element by default. We have the entire dropdown menu selected for this step, so if the hover away from the menu, it will go to step 1.

That's it! When you test your walkthrough you will see that tour reverts to Step #1 when the user's mouse moves away.