--- title: "Selected Element Visibility Rule" slug: "selected-element-condition-rules" updated: 2024-10-09T09:08:39Z published: 2024-10-09T09:08:39Z --- > ## 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. # Selected Element conditions as Visibility Rules Note: If you see the following UI, you have the New Visibility Rules enabled for the account. For more information, see [Understand New Visibility Rules](https://support.whatfix.com/docs/understand-visibility-rules-20). ![Visibility Rules 2.0 screenshot](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/vr2_main%20page.png) - [Introduction](/docs/selected-element-condition-rules#introselected) - [Types of Selected Element condition Rules](/docs/selected-element-condition-rules#typesselected) - [Use Cases](/docs/selected-element-condition-rules#usecaseselected) ## Introduction The Selected Element rules enable you to add identifiers or properties for unique elements on your web page as a Display Rule. This ensures that the tooltip shows on the correct element and does not flicker. The following are the Selected Element rules: - Selected Element Is (CSS Selector/jQuery Selector) - Selected Element Text (Is, Is One Of) your title goes here The Selected Element rules are available only under Display Rules for tooltips. --- ## Types of Selected Element condition Rules ### Selected Element Is (CSS Selector/jQuery Selector) Your application uses unique IDs for some elements on the page. This is used when your element is selected from a list of options. For example, a drop-down menu. Use this option to provide CSS selector or identifier for the element. The following are examples of jQuery selectors: - **$("#firstname"):** Selects the element with id="firstname" - **$(".primary"):** Selects the element with class="primary" The following are examples of CSS selectors: - **input[title="Search"]:** Selects the input element with the title "Search" - **[id="#analytics-left-pane"]:** Selects the element with the id="analytics-left-pane" ![selected_element](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/selected_element.png) --- ### Selected Element Text (Is/Is One Of) This is the text that is displayed on the element that is selected. If your application supports multiple languages, choose **Is One Of** option and add the name with a comma(,) as a delimiter. ![selected_element_text](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/selected_element_text.png) your title goes here Whatfix recommends that you use the **Selected Element Is** rule, followed by the **Selected Text** rule while adding Visibility Rules to any content or widget. Adding CSS Selectors ensures that Whatfix can easily find the required element and reduce the possibility of displaying content/widgets on the wrong element. ![Visibility_rule_Selected_text_is](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Visibility_rule_Selected_text_is.png) your title goes here The value is case-sensitive. --- ## Use Cases Display tooltips on options inside a dropdown Consider that you want to show tooltips on options inside a dropdown in your application. These options have a unique identifier, id (CSS Selector) are used to identify the element. Use the Selected Element Is rule and the id as the CSS Selector to ensure that the tooltip appears correctly. 1. On the Whatfix Studio, select the rule as **Selected Element Is** and **CSS Selector**. ![css_selector](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/css_selector.png) 2. Enter the selector. ![css_selector_id](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/css_selector_id.png) 3. Finish creating the Whatfix content. Display tooltips when there are no unique identifiers for the elements Consider that you want to show tooltips on buttons in your application. But the buttons have no unique identifiers except for the button names. Use the Selected Element Text to ensure that the tooltip appears correctly. 1. On the Whatfix Studio, select the rule as **Selected Element Text** and **Is**. ![2023-05-04_17-52-25](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2023-05-04_17-52-25.png) 2. Enter the button name. ![selected_element_text_is_example](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/selected_element_text_is_example.png) 3. Finish creating the Whatfix content. ## Related - [What is the difference between Selected Element and Other Element?](/what-is-the-difference-between-selected-element-and-other-element.md)