--- 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-11-09T16:31:51Z published: 2026-11-09T16:31:51Z canonical: "help.userflow.com/tooltip-element-selection" --- > ## 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, place a launcher in your app, or add a custom Resource Center launcher, you anchor it to an element in your app, such as a button or menu item. This page shows how to select that element, what to do when Userflow picks the wrong one, and how to enter a CSS selector yourself. The steps use a flow tooltip as the example, but they're the same everywhere you select an element. ## How do I select an element automatically? Userflow's automatic element selection lets you click the element in your app. Userflow shows you a picture of what you picked, and records several details about it (CSS, attributes, and surrounding context) so it can find it again. After you add a tooltip step to the flow: 1. Click the **Show tooltip on this element** block to open its details on the right. 2. Click **Select element**. 3. Enter the URL of the page in your app that has the element, and click **Select element**. 4. Click the element in your app. Userflow adds it to the tooltip step and takes you back to the Flow builder. Selecting elements needs the [Userflow Chrome extension](/userflow/docs/userflow-chrome-extension). If automatic selection finds the right element, you don't need any of the manual options on this page. ## Userflow picked the wrong element? Try these first Most selection problems can be fixed in the builder, without your browser's developer tools. Try these in order, and move on only if the one before doesn't work. ### 1. Adjust strictness Strictness controls how closely an element in your app has to match the one you selected. 1. In the step, click **Show tooltip on this element** to open its options. 2. Move the **Loosest / Strictest** slider: - **Stricter** if Userflow is attaching to a similar element nearby, such as the wrong row or button. - **Looser** if Userflow can't find the element after small changes to your app. 3. Preview the flow to check the result. What each level means: - **Loosest:** most flexible. Still works if some attributes change. - **Loose / Looser and Strict / Stricter:** a balance between flexibility and precision. - **Strictest:** needs an exact match for text, classes, and other attributes. ![The Loosest to Strictest slider in an element's options](https://cdn.us.document360.io/9697557a-eb5d-476f-9b09-062b0f7bdcbd/Images/Documentation/image(720).png) ### 2. Turn on Dynamic text If the element's text changes from user to user, such as a name or a count, tick **Dynamic text**. Userflow then ignores the element's text when matching it. ### 3. Choose the nearest element If several elements look the same, use **Nearest element** in the **If multiple matches** menu. See "Choose the nearest element" on this page. ### 4. Go manual If strictness, Dynamic text and the nearest element haven't picked the right element, enter a CSS selector yourself. See "How do I select an element manually with Go manual?" on this page. If the element is right but loads slowly, or the flow can't find it at all, see [Element not found](/userflow/docs/element-not-found). ## How do I select an element manually with Go manual? **Go manual** lets you enter the element's CSS class, ID, or a custom data attribute. Find these with [Chrome's Inspect tool](https://developer.chrome.com/docs/devtools/inspect-mode): 1. Open the page in your app that has the element. 2. Right-click the element and select **Inspect**. 3. Click the select tool in the Inspect panel, then click the element on the page. Its code is highlighted in the panel. The code often has classes Userflow doesn't need: for `<li class="combo-box_option is-active">`, use only **combo-box_option**. 4. In Userflow, select **Go manual** and enter the class or ID in the **CSS selector** box. Put a `.` before a class and a `#` before an ID, for example `.combo-box_option` or `#main-header`. ### Use a custom data attribute instead of a class or ID Custom data attributes are a good choice when your class names or IDs change often. In the **CSS selector** box, put the attribute in square brackets, for example `[type="text"]`. For a field like `<input type="text" name="description" placeholder="What have you done?">`, you could use `[type="text"]`, `[placeholder="What have you done?"]`, or several attributes together. If an attribute is used on more than one element on the page, combine attributes, or add element text or a match order (see "What if several elements share the same CSS class?" on this page). If your app generates class names or IDs that change between deploys, your developers can also tell Userflow.js how to identify elements: exclude dynamic class-name patterns, exclude generated IDs, or prefer a stable attribute such as `data-testid`. See [Element inference and dynamic class names](/userflow/docs/element-inference-and-dynamic-class-names). ## What if several elements share the same CSS class? Buttons, menu items, or navigation links on one page often share a CSS class, so the class alone doesn't tell Userflow which element you mean. With **Go manual**, you can narrow it down in three ways. ### Add element text Enter the element's label in the **Element text** box along with the CSS class. For example, to point at **Danish** in a language menu where every language uses the same class: - **Element text:** Danish - **CSS selector:** `.combo-box_option` ![Go manual settings with Element text set to Danish and CSS selector set to .combo-box_option](https://cdn.us.document360.io/9697557a-eb5d-476f-9b09-062b0f7bdcbd/Images/Documentation/image(9).png) ### Specify the element order Use the **If multiple matches** option to say which match you mean by its order on the page. For example, if every item in your header menu uses `app-header__menu-item`, choose **2nd element** to select the second item. ### Choose the nearest element If you don't know the element's order, use **Nearest element**: 1. Select **Nearest element** in the **If multiple matches** menu. 2. Click **Select element**. 3. Click something in your app close to the element you want, such as a nearby button. Userflow takes you back to the Flow builder with the nearest match selected. If **Nearest element** still picks the wrong one, adjust the strictness slider or tick Dynamic text, as described in "Userflow picked the wrong element? Try these first" on this page. ## Related articles - [Element not found](/userflow/docs/element-not-found) - [Selecting elements in a dropdown menu](/userflow/docs/dropdowns) - [Selecting elements in a nested menu](/userflow/docs/nested-menus) - [Element inference and dynamic class names](/userflow/docs/element-inference-and-dynamic-class-names) - [Flow builder basics](/userflow/docs/flow-builder-basics) ## Related - [Flow builder basics](/flow-builder-basics.md) - [Element not found](/element-not-found.md) - [Element inference: keep Userflow finding elements when class names or IDs change](/element-inference-and-dynamic-class-names.md)