Selecting and targeting elements

Tours and Hints tools are able to target elements (buttons, headers, menu items, etc.) in your application. In the editor, you can select the desired element by clicking on it.

This will attach the Product Fruits card to the element.

How it works

We use CSS selectors for identifying elements. CSS selectors are used for identifying elements inside the HTML DOM. They are standardized and widely used by developers or test automation creators. 

A CSS selector might look like this:

#main > div.w3-responsive > table > tbody > tr:nth-child(1) > th:nth-child(2)

or like this:

body div.container-fluid div main div div.d-flex div:nth-child(1) h1

Basically, imagine it like road directions. You can read more about it here. This article expects that you have a brief knowledge of CSS selectors. Otherwise, talk to your developers.

Potential issues and solutions

The Product Tour and Context Help tools are using CSS selectors for finding elements in the site. You don't have to learn how to create selectors from scratch. The visual helper will help you to select the proper element by pointing and clicking at it.

But sometimes it's difficult to guess the right and unique CSS selector. Not every developer decorates elements with ID attributes. Also, there are JavaScript libraries that generate random class names for elements. You will be able to find the element by them, but they can change over time and your tour or help will stop showing.

There is a brief overview of typical selector problems and their possible solutions. Some of them need code changes. 

Remember, try to talk to developers. They can find the best solution that fits your application.

The selector looks like this or there is some part like this: div.css-13snr3i

The given class name doesn't look human-coded, it is probably generated. Your application probably uses the Emotion library. You can configure it to format the class name with a prefix and a label. Please see the labelFormat config option in the Emotion docs. So, it will turn to this:


Then, you change the selector to this:


This will tell us to find MYCSS_src--App--Box in the attribute called class, it can be anywhere in it.