Since dropdown menus reveal their content generally by demand, and their behavior is dynamic on a page, it is not recommended to use tooltips on them.

As you might already know, steps are building blocks of guides and, they fall into three categories as Modals, Tooltips, and Input Fields.

If your wish is to design a flow, at some point, entailing end-users to open a dropdown menu and select an item from it, you should go with the Tooltips by creating two separate steps:

  1. The first step is for opening the dropdown menu.
  2. The second step is for selecting an item from the menu we've opened.

Ps: In the following example, we've utilized from one of our dropdown lists in the https://panel.userguiding.com/segmentation

1) The first step is for opening the dropdown menu

  • Select the Tooltip as your step type - you, too, can Create from Scratch.
  • Choose the option of "Proceed to Next Step on click of Element".
  • Highlight the Dropdown Menu Bar and then click for selecting it as this step's element, type your text in the given area.  

If you follow our previous instructions, with the help of the step you've created, end-users can click on the Menu Bar to open the Dropdown Menu like in the example below.

After opening the menu, we want people to select an item from it. So, our second step should be designed in accordance with that.

2. The second step is for selecting an item from the Dropdown Menu.

  • Select the Tooltip as your step type - you, too, can Create from Scratch.
  • Choose the option of "Proceed to Next Step on click of Button".
  • Turn the "Interaction with the highlighted area ON". So that end users can select an item from the menu they've opened.
  • While the menu is open, highlight the whole of it and then click for selecting it as this step's element, type your text in the given area. 

Important: If your Dropdown Menu gets closed while you are trying to highlight it, move the curs0r onto the Menu Bar and press Option (Alt for Windows) + Click. That way, the menu can remain open. First, you can highlight an item of the menu and then, with the help of Up Arrow, you can highlight the menu as a whole.


If you follow the above instructions, with the help of the step you've created, end-users can select an item from the Dropdown Menu and proceed to the next step by clicking on the NEXT button like in the example below. 

An alternative method: 

If you prefer, you can combine all of the above into a single step. 

  • Again, select the Tooltip as your step type.
  • Choose the option of "Proceed to Next Step on click of Button".
  • Turn the "Interaction with the highlighted area ON". So that end users can click onto the Menu Bar to open the Dropdown Menu.
  • Turn the "Interaction with page ON". So that end users can select an item from the menu they've opened.


If you follow the above instructions, with the help of a single step you've created, end-users 1) can open the Dropdown Menu, 2) select an item from there, and 3) proceed to the next step by clicking on the NEXT button like in the example below. 


Related Articles:

Different Kinds of Steps Within a Guide
Using the Step Editor in the Extension.
How to use Autofill and Input field

Did this answer your question?