Selected Element conditions as Visibility Rules
- 09 Oct 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Selected Element conditions as Visibility Rules
- Updated On 09 Oct 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Your title goes here
If you see the following UI, you have the Advanced Visibility Rules enabled for the account. For more information, see Understand Advanced Visibility Rules.
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 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.
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.
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.
-
On the Whatfix Studio, select the rule as Selected Element Is and CSS Selector.
-
Enter the selector.
-
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.
-
On the Whatfix Studio, select the rule as Selected Element Text and Is.
-
Enter the button name.
-
Finish creating the Whatfix content.
Was this article helpful?