Nested menus

Problem

You have a nested menu, which expands when the user hovers over it. Example:

You want to guide the user to click the “Create account” menu item using tooltips. They must hover over “Sales”, then hover over “Create new”, then click “Create account”.

Just putting a single tooltip on the “Sales” menu item won’t work well. Once the user hovers over “Sales”, the tooltip may block the “Create new” item.

Solution

Use a tooltip step for each menu item (3 in total).

Each step (except the last one) has a trigger that goes to the next step when the next step’s menu item appears. Example: In Step 1, we have a trigger that fires when “Create new” is present, which takes the user to Step 2.

But what if a user sees Step 2 and then accidentally hovers out of the menu making “Create new” disappear? Then we want to go back to Step 1, asking the user to hover over “Sales” again.

Therefore, each step (except the first one) also has a trigger that goes back to the previous step when the current step’s menu item disappears. Example: In Step 2, we have a trigger that fires when “Create new” is not present, which takes the user back to Step 2.

Finally, Step 3 links to Step 4 when the “Create invoice” menu item is clicked.

Here’s what it looks like in the flow builder:

In text format:

• Step 1, a tooltip pointing to “Sales”
  • Trigger: If “Create new” is present => Go to Step 2
• Step 2, a tooltip pointing to “Create new”
  • Trigger: If “Create invoice” is present => Go to Step 3
  • Trigger: If “Create new” is not present => Go back to Step 1
• Step 3, a tooltip pointing to “Create invoice”
  • When tooltip target is clicked => Go to step 4
  • Trigger: If “Create invoice” is not present => Go back to Step 2

The same pattern can be used for menus in just 2 levels, or in more than 3 levels. Say we wanted the user to click Sales -> Customers:

• Step 1, a tooltip pointing to “Sales”
  • Trigger: If “Customers” is present => Go to Step 2
• Step 2, a tooltip pointing to “Customers”
  • When tooltip target is clicked => Go to step 3
  • Trigger: If “Customers” is not present => Go back to Step 1