--- title: "Element Precision Rules for content on Studio" slug: "visibility-rules-for-content" updated: 2026-05-11T09:54:28Z published: 2026-05-11T09:54:28Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Element Precision Rules for content on Studio > [!WARNING] > Note: > > Display Rules are now available as [**New Visibility Rules**](/studio/docs/understand-advanced-visibility-rules-for-content) and **Element Precision**Rules in Whatfix Studio and Whatfix Guidance Dashboard. Element Precision Rules are available for Flow steps, Smart tips, Beacons, Launchers, and Blockers. #### **What are Element Precision Rules?** Element Precision Rules help ensure that content such as Flow steps, Smart tips, Beacons, Launchers, and Blockers appears on the correct UI component, preventing misalignment or flickering. These rules improve widget targeting and help prevent: - Incorrect widget placement - Widgets appearing on the wrong element - Flickering - Inconsistent positioning Use Element Precision Rules when: - Multiple elements look similar on the page. - Elements are dynamically loaded. - Widgets appear on the wrong element. - The target element does not have a stable identifier. - You want more control over how Whatfix identifies an element. #### Types of Element Precision Rules | **Rule** | **Description** | **Example** | | --- | --- | --- | | **Using CSS selector** | Identifies an element using a CSS selector. It is useful when elements have unique identifiers or specific class names. CSS selectors help in precisely targeting elements based on attributes such as class, ID, or hierarchy. | Display the content only if an element with .help-button exists. | | **Using jQuery selector** | Identifies an element using a jQuery selector, which enables more advanced element selection, including filters and conditions. It is useful when you need to select elements dynamically based on complex conditions. | Display the content when an element matching `$("div[data-role='popup']")` is found. | | **Using Element Text** | Identifies an element based on the visible text it contains. It is useful when targeting buttons, labels, or other text-based elements. | Display the content if the button text is Login. | > [!WARNING] > Note: > > Adding CSS Selectors ensures that Whatfix can easily find the required element and reduce the possibility of displaying content or widgets on the wrong element. Use the following steps to configure Element Precision Rules for Smart tips in Studio: 1. On Whatfix Studio, click **Element Precision**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ST_Click_Element_Precision.png) 2. Select **Using CSS selector** from the **How would you like to identify the element?** dropdown. .![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Css_Selector.png) 3. Enter the selector **Value**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Value.png) 4. Complete creating the Whatfix content and click **Save Tip**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Save_Tip(1).png) 5. [Preview](/studio/docs/preview-smart-tips) the Smart tip and verify the placement. #### **Example use case** #### Display Smart Tips on options inside a dropdown Consider that you want to show a Smart Tip on options inside a dropdown in your application. These options have a unique identifier, ID (CSS selector), used to identify the element. Use the **Using** **CSS selector** rule and specify the CSS selector value to ensure the Smart Tip appears correctly on the desired element. 1. On Whatfix Studio, click **Element Precision**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ST_Click_Element_Precision.png) 2. Select **Using CSS selector** from the **How would you like to identify the element?** dropdown. .![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Css_Selector.png) 3. Enter the selector **Value**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Value.png) 4. Complete creating the Whatfix content. #### Display Smart Tips when there are no unique identifiers for the elements Consider that you want to display a Smart Tip on a button in your application. The button has no unique identifiers such as IDs or specific classes. The only distinguishing factor is the button text. In such cases, use the **Using Element Text**rule to ensure that the Smart Tip appears correctly on the intended button. > [!WARNING] > Note: > > Whatfix recommends that you use the **Using CSS selector** rule, followed by the **Using Element Text** rule while adding Element Precision Rules to Smart Tips. 1. On Whatfix Studio, click **Element Precision**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ST_Click_Element_Precision(1).png) 2. Select **Using CSS selector** from the **How would you like to identify the element?** dropdown. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Using_CSS_Selector.png) 3. Enter the selector **Value**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_CSS_Value.png) 4. Click **Add** **condition**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS_Add_Condition.png) 5. Select **Using Element Text** from the **How would you like to identify the element?** dropdown. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(685).png) 6. Select **Contains** from the dropdown. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/EP_CSS.png) 7. Enter the button **Value**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Login.png) 8. Complete creating the Whatfix content.