Overview
When you highlight an area in your web platform while creating a tooltip or an input field, UserGuiding stores CSS selectors based on the element you’ve selected, in some cases, our algorithm can’t find the highlighted element, and you’ll receive the “Selected element is hidden” error message.
In this article, we’ll explain the reasons for getting this error message and provide you with solutions.
Why can’t the tooltip find the selected element even when I am at the correct URL?
The reason for your specific use case might be one of the following:
The selected area is not present on the current UI while attempting to preview the step.
Since the page has more than one element you select, the algorithm can’t find the element you highlighted among several identical elements.
A particular condition should be met for the element you’ve selected to be shown. (i.e., opening the dropdown menu)
How to utilize the “Wait until element is present” functionality?
Some elements in a UI of a web platform require more time to load than other elements. If you’ve selected such an element while creating a tooltip or an input field, you should set your guide to wait until the selected element is present on the current UI.
Open the Chrome extension and go to the corresponding tooltip/input field step to achieve this. Next, click on the “Advanced” tab and check the “Wait until element is present” box. Here, you can set the waiting time and designate the following action if the element still cannot be found.
How to utilize Custom CSS Selector to differentiate a particular element from identical ones
You can overwrite CSS selectors found by UserGuiding and find the particular element you want to highlight with Custom CSS Selector.
To do that, hover on the element that you want to highlight and open the context menu. Then, click on Inspect. You’ll see specific characteristics like the ID and class of the selected element there.
Once you designate the selector you want to use, you can open the step in the Chrome extension. Enable Custom CSS Selector and type the selector into the opening input field. Please feel free to check this article if you are unsure how to do it.
How to utilize the “Proceed to Next Step on click of” functionality?
When a tooltip is created, users can either click on a button or on the element in your UI to proceed to the next step.
Sometimes, a particular condition should be met for the element you’ve selected to be shown. For example, if an element is located within a dropdown menu, the guide cannot find it unless the end user is directed to open it.
To achieve this, the tooltip should be set to proceed to the next step when the end-user clicks on the element. Please take a look at this article for more information.