When you select elements to highlight for a tooltip/input/hotspot, UserGuiding can precisely locate them through the Custom CSS Selector option.
However, if your elements have dynamic HTML attributes, which means that the ID, class, etc., will change after each page refresh, our Custom CSS selector won't work properly.
In this case, you can try finding other HTML attribute options that aren't changing (this could be the case for the href, aria-label, etc.).
Finding and using an unchangeable HTML attribute
In this example, we will highlight an HTML element from the Gmail app by locating an attribute that is not dynamic.
Right-click on the element and click on inspect
Look for an attribute of your HTML element that doesn't change. In our example, we'll choose the aria-label attribute
Copy and paste it to the CSS selector field
Remove the quotes
Wrap the attribute with square brackets
Save & publish changes
You will see your changes will apply immediately, and it'll highlight the same element every time, even if it's changing dynamically.
You can try finding other unchangeable HTML attributes and use the same format: [attribute=value].
Important: If all your HTML attributes are dynamic, you can ask your developers to assign an attribute to your element so that you can highlight them precisely.