Identifying conditions for showing tooltips
  • 6 minutes to read
  • Print
  • Dark

Identifying conditions for showing tooltips

  • Print
  • Dark

You can configure walkthroughs to display the tooltip only when certain conditions are met.

You can set conditions based on,

  • URL
  • URL Hostname
  • URL Path
  • URL Parameter
  • URL Hash
  • Other Element on Page
  • Window variable
  • Element CSS Selector/JQuery
  • Select Element
  • Element Text

To add conditions,

  1. Click the Whatfix Editor plugin in the browser toolbar.
  2. Click Flow.
  3. Enter the name of the walkthrough as you want it displayed to a user.
  4. Click +Step.
  5. Click the desired element on the page that the user needs to select.
  6. In the editor, scroll down to the Advanced Options.
    If the Advanced Options is not displayed, click the checkbox to enable it. 
  1. Now, under the Display Rules section set the desired conditions. 
  2. If needed, you can add multiple conditions using the plus icon. 
  3. Finish creating the walkthrough.

Supported Conditions


    URL You can use the URL criteria to specify any part of the URL that you want to use as a visibility rule. You can specify the URL Hostname, path, parameter, etc using this criterion.

    URL Hostname
    When you want to uniquely identify a page using the domain name, you can use this condition. The URL Hostname is the first part of any URL.

    Example: If you wish to display the tip only if you are on, you can add a condition as shown in the screenshot on the right.

    URL Path
    The website path name is what comes after your domain name until the parameters or hashes.
    For example, if the website URL is //, then the pathname is /mail/answer/8395

    Your condition looks something like the image on the right.

    URL Parameter
    If you want to identify your web page using the parameters on the URL, you can use this condition.

    For example, If you want to show a tip to a user only when the search phrase has "water" in Google, you can add a condition as shown in the screenshot on the right.

    As you can see in the snapshot on the right, we have added three conditions.
    1. The page must be (URL Hostname)
    2. The pathname is /search (URL Path)
    3. The query parameter is ?q=water

    URL Hash

    If you want to identify a page using the hash value of your URL, you can use this condition. Hashes are usually present in Single page applications made using AngularJs or ReactJs. There are no page refreshes but only Hash changes.

    Other Element
    If you want to identify a page based on the presence of a particular element (other than the one selected by you) on your web page, you can use this condition.
    The values passed to this condition are CSS selectors like #ID, .class or Jquery.

    Note: Use this only if it doesn't slow your application.

    Window Variable
    For advanced customization, you can choose to identify using the value of a particular Javascript global variable.
    Example: If you want to check user.role='admin', you can set the condition.
    You can also use this option to perform comparison options using the following criteria:
    • Greater than

    • Less than

    • Date Greater than

    • Date Less than

    Note: You don't need to add a window at the start for window variables.

    Element CSS Selector/ JQuery
    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. This lets you provide your own CSS selector identifier for the element.
    Sample values



    Select Element
    If you find using CSS Selectors difficult when configuring Branching and Display Rules, you can now use the Select Element option. It is as simple as selecting an element on your app.

    In the Branching/Display Rules section, choose the Select Element option from the dropdown, click the element in your app, and then finish configuring the rule as usual.

    Element Text
    This is the text that is displayed on the Element selector that is selected above.
    If your application supports multiple languages, you can choose "is one of" option and add the name with a comma(,) as a delimiter.
    Note: The value is case sensitive.

    For a better understanding of CSS selectors see CSS Selectors.

Supported Operators

    Operator Description
    Equals For exact match
    Not Equals Doesn't equal the value
    Contains Set value is present anywhere in the value of the condition. (Check for strings)
    Not Contains Set value is not present anywhere in the value of the condition
    Starts With Set value is at the beginning of the value of the condition
    Ends With Set value is at the end of the value of the condition
    Exists Set value is available (or true)
    Not Exists Set value is not available (or false)

Points to remember

    • If you have created walkthroughs inside *iframes* , then window variable must be pointed to the respective frame. You may use window.frames
    • If you are adding multiple conditions, then the tip is displayed only if all the conditions are true. (Similar to the Boolean AND)
    • jQuery  CSS selector options always show in the UI, however, it  is supported ONLY for applications that have  jQuery in the underlying platform
      For window variables:
    • Greater and less than accept only numerical values
    • For date greater than/less than the default format is “MM/DD/YYYY”. The format can be changed to match your system date format. Contact to make changes.
    Here is a great resource to learn more about JQuery Selectors and CSS selectors.
Was this article helpful?