Waiting for a Target Element

If your tour or hint shows "waiting for the target element" in the editor, it may be because of one of the following situations.

The CSS selector is wrong

This is the most common reason for not finding the target element. Tour cards and hints use CSS selectors to find target elements in your application. When you use our editor to visually select a target, we fill in the selector for you. However, it's not always possible to find the most appropriate selector. Typical issues include:

• Dynamic CSS classes. Dynamic CSS classes often look something like this: css-4fr25h.
• The HTML attributes contain dynamic information. For example, an element that looks like this: <div data-impl="7441749"></div>

The solution, in this case, is to add custom, unique attributes to your HTML or CSS code. This is something your developers will need to do, and we have documentation covering the topic here.

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, when you navigate to a section of a menu and the section title or tab changes states (e.g. it stays highlighted as long as you're on the page). This CSS selector may be different than the version of the section title prior to being clicked. 
• when you hover over 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 to accomplish this.

The element has not yet been added to the page

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