When you add a tooltip to a flow, you will be asked to anchor it to an element in your app. This selection ensures that the tooltip appears in the proper place. Userflow makes selecting elements in your app easy with the one-click automatic element selection option. Userflow's intelligent element selector visually confirms your selection, showing exactly which element you've chosen rather than simply displaying raw code. Behind the scenes, it leverages multiple data points, including CSS, element attributes, and contextual information, to capture the selection.
Most of the time, this method of choosing an element is all you need, but we know that no two apps are identical; sometimes, you may need a more customizable solution. For that, we provide the Go manual option. In both cases, Userflow captures the CSS class, unique ID, or other attributes for the element, which identifies it for the tooltip it’s anchored to.
Automatic element selection
Once you’ve added the tooltip to the flow:
Click the Show tooltip on this element block to display its details on the right.
Click Select element.
Enter your app’s URL for the page that contains the element and click Select element.
Click the element in your app. Once selected, it will automatically append it to your tooltip step and return you to Userflow.
If the element selection method described above works for your app, there is no need to use one of the manual methods below.
Go manual
Adding an element manually requires entering its CSS class, unique ID, or custom data attribute in Userflow. You can find these using Chrome’s Inspect tool. In Userflow, select the Go manual option, then use the instructions below to locate your element’s CSS class, ID, or attribute and determine which manual entry method works best for your app.
Using the Chrome Inspect tool
The Google Chrome Inspect tool shows the code behind web page elements. To inspect the element you want to anchor your tooltip to:
Open the page of your app where you want to select an element.
Right-click on the element or anywhere on the page, and select Inspect.
To identify the specific CSS for the desired element, click the select tool from the Inspector, then click the element on the page.
The element selection will highlight the specific CSS in the Inspect tool panel. Keep in mind that there may be repeated elements or other details that are not needed for Userflow. In the example below, you would select only combo-box_option.Enter the CSS class or ID in the CSS selector box and ****add a “.” before a CSS class or a “#” before a CSS ID. For example, .combo-box_option or #main-header. (See the section below for instructions on how to add a CSS custom attribute.)
Using custom attributes
Userflow supports using custom data attributes to identify your application’s elements. These attributes provide stable, unique identifiers that are a good option when your CSS class names or IDs are dynamic or change frequently. Unlike CSS classes or IDs, custom attributes are surrounded by brackets [ ] when input into the CSS selector box in Userflow. For example, [type=”text”].
To locate and select custom attributes, use the instructions in the Using the Chrome Inspector tool section.
In the example above, the CSS attributes for this field include <input type="text" name="description" placeholder="What have you done?" value="">. You could use any one or all of the attributes for this element. For example, [type=”text”] or [placeholder=”What have you done?”] in the CSS Selector field.
Note
If an attribute is used on more than one element on the page, use multiple attributes to further specify which element should be selected, or add additional information such as element text or multiple match order.
How to add a CSS class that is used for multiple elements
There may be multiple matches on a page using the same CSS class. For example, multiple buttons, navigation options, or menu items on a page may share the same CSS class. Therefore, using the class alone in Userflow may not be enough to indicate which element the tooltip should be anchored to.
There are three main ways to manually indicate in Userflow (using Go manual) which element selection to use:
Add element text (e.g, button label, menu text, etc.) in the Element text box to differentiate it from the others.
Specify the order in which the desired element appears on the page. For example, if it’s the first, second, or third occurrence of the CSS class that appears on the page. This orients Userflow to determine which element to use.
Select another element nearest to the desired element.
Use the instructions below to use one or more of these methods.
Add element text
In the example above that directs users to select Danish from the language menu, if each language listed uses the same CSS class, you can enter the text label of the element in the Element text box, along with the CSS class, to differentiate which item in the menu the tooltip should be anchored to.
Example:
Element text = Danish
CSS selector = .combo-box_option
.png)
Specify the element order
When multiple elements on a page share the same CSS class or attribute, you can specify which element Userflow should select based on the order in which it appears on the page.
In the following example, the CSS class app-header__menu-item is used for each navigational element in the app-header__menu-group; use the multiple match selection option, which specifies whether it is the first, second, third, etc. usage of the class on the page.
In this example, to select the second menu item, choose 2nd element next to the If multiple matches prompt.
Choosing the nearest element
If you are unsure of the CSS class's order for the element you want to select, you can use the Nearest element option in the If multiple matches menu.
Select Nearest element from the menu.
Click Select element to choose an object in your app nearest to the desired element (e.g., a button) on the page.
Select the element in your app. You will be returned to Userflow with the nearest element selected.
Adjusting how Userflow selects the nearest element
If Userflow doesn’t select the correct element using the nearest element method, you can use the following options to adjust how Userflow chooses the nearest element.
Loosest/Strictest: If manual selection does not result in Userflow choosing the correct element, use the slider to make the selection stricter.
Loosest: Most flexible, works even if some attributes change.
Strictest: Requires an exact match for text, classes, and other attributes.
Intermediate levels (Loose/Looser & Strict/Stricter): Offers a balance between flexibility and precision.
Dynamic text: If the text on the element you select is dynamic and may change, select the Dynamic text checkbox to instruct Userflow to ignore the specific text on the element it identifies, so it will not consider it in element selection.
