--- title: "Selecting elements" slug: "tooltip-element-selection" description: "Easily anchor tooltips in your app with Userflow's automatic element selection, ensuring precise placement using CSS classes and unique IDs." updated: 2026-05-05T21:05:45Z published: 2026-05-05T21:05:45Z --- > ## Documentation Index > Fetch the complete documentation index at: https://help.userflow.com/llms.txt > Use this file to discover all available pages before exploring further. # Selecting elements When you add a Tooltip to a Flow, a Launcher in your app, or add a custom Resource Center Launcher, you will be asked to anchor it to an element in your app. This selection ensures the tooltip appears in the correct position. Userflow makes selecting elements in your app easy with one-click **automatic element** **selection**. 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 selecting an element is sufficient, but we know no two apps are the same; sometimes you may need a more customizable solution. To that end, we provide the **Go manual** option. In both cases, Userflow captures the CSS class, unique ID, or other attributes of the element that identify it for the tooltip it's anchored to. > [!NOTE] > Note: These instructions apply to multiple applications > > This document describes element selection from the perspective of a Flow tooltip. However, these steps are the same for other applications where elements are selected. ## Automatic element selection Once you've added the tooltip to the flow: 1. Click the **Show tooltip on this element** block to display its details on the right. 2. Click **Select element.** 3. Enter your app's URL for the page that contains the element and click **Select element**. 4. Click the element in your app. Once selected, it will automatically append it to your tooltip step and return you to Userflow. > [!NOTE] > 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](https://developer.chrome.com/docs/devtools/inspect-mode). 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: 1. Open the page of your app where you want to select an element. 2. Right-click on the element or anywhere on the page, and select **Inspect**. 3. 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**. 4. 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 Inspect tool](/docs/tooltip-element-selection#using-the-chrome-inspect-tool) section. In the example above, the CSS attributes for this field include **.** 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] > 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** ![](https://cdn.us.document360.io/9697557a-eb5d-476f-9b09-062b0f7bdcbd/Images/Documentation/image(9).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. 1. Select **Nearest element** from the menu. 2. Click **Select element** to choose an object in your app nearest to the desired element (e.g., a button) on the page. 3. 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. When you select an element in your app using the element picker, Userflow doesn't just capture one path to that element. Instead, it uses an algorithm to generate and compare multiple possible CSS selectors from the root of your app down to the target element. Userflow then evaluates these selectors to determine which one is the most accurate and reliable for consistently identifying that element across sessions. This ensures the same element can be found again, even if your app's structure changes slightly. - **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. A contextual UI element attached to in-app product elements for inline guidance. Guided step-by-step, in-app experience created in Userflow that helps users navigate through tasks or feature discovery. An interactive in-app element (button, beacon, or icon) that users can interact with to open a flow, checklist, or other help content. Launchers draw users’ attention to certain parts of your app. The in-app UI element that reveals the Resource Center (often an icon or button). This can be either the Userflow defaults or elements from your app for custom Resource Centers. ## Related - [Flow builder basics](/flow-builder-basics.md) - [Element not found](/element-not-found.md) - [Element inference and dynamic class names](/element-inference-and-dynamic-class-names.md)