Waiting for the target element

If your tour or hint waits for the target element, it may be because of one of the following situations.

CSS selector is wrong

The most common reason is this. Tour cards and hints use CSS selectors to find target elements in your application. When you use our editor to visually select the target element, we will find this selector for you. But it is not always possible to find the best selector for us. The typical issues can be:

• CSS classes in your application are dynamic. For example, your CSS classes look like css-4fr25h.
• HTML attributes contain dynamic information. For example, an element like <div data-impl="7441749"></div>

The solution, in this case, is to add custom unique attributes to your HTML code. It is something that your developers have to do. This article covers this topic, you can send it to them.

Different selectors for different target element states

A special case is when the target element gets a different CSS class (or an attribute) when it is:

• marked as active - for example, a menu item that is visually highlighted only when you are navigated in the section where this menu item is heading to.
• when you hover or click on the element - for example, some design libraries create various visual effects when the element is clicked.

The solution, in this case, is to find an alternative selector. You can use Chrome DevTools for this.

The element will be added to the page later

In this case, the element is not present on the page and once the element will appear, the step will automatically display. You don't have to change anything in this case.