Selected Element conditions as Visibility Rules

Updated On 11 Oct 2023
2 Minutes To Read

Print
Share
Dark

Light
PDF

Article Summary

Share feedback

Thanks for sharing your feedback!

Introduction
Types of Selected Element condition Rules
Use Cases

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

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, you can choose Is One Of option and add the name with a comma(,) as a delimiter.

selected_element_text

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/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

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) that you can use to identify the element. You can 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. You can use the Selected Element Text to ensure that the tooltip appears correctly.