This guide explains how to configure a tour to guide your users to interact with elements that only appear when the user moves their mouse over a particular element. For example dropdown menus which appear on hover rather than click.
Add a highlight step to your tour
Select the element which the user needs to hover over. In this example its the button which triggers the dropdown menu to appear.
Now make sure that the tour is setup to advance to next step when user hovers over highlighted area and enable the option allow interaction with page This way the tour will advance when the user hovers over the button.
Add another step to highlight one of the items in the dropdown menu that appears on hover. When using the element selector tool, enable the Allow hover option which appears in the bottom right hand corner of the screen.
Once you have selected the element, make sure that the tour is setup to advance to next step when user clicks within highlighted area and enable the option allow interaction with page This way the tour will continue when the user clicks on the dropdown menu item.
Let’s preview our tour to see how this works from start to finish.