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 after choosing "Highlight Element" when creating a new card, or "Change" at the top of the editor menu if the card has already been created.
This will then attach the Product Fruits card to the element.
We use CSS selectors to identify elements. CSS selectors are used for identifying elements inside the HTML DOM. They are standardized and universally used by developers and 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 CSS like road directions. You can read more about them here. This article expects that you understand the basics of CSS selectors. Otherwise, talk to your developers.
The Tour and Hints tools use 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.
This has been a brief overview of typical selector problems and their possible solutions. Some of them may need code changes or adjustments.
Remember, try to talk to your developers if possible. They will help in finding the best solution for your application.
The selector looks like or will contain part of something like this:
If the given class name doesn't look human-coded, it is probably generated. Your application could use the Emotion library, for example. 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. It will generate this:
Which you can then change to this:
This will cause Product Fruits to look for any elements with the "class" attribute containing