This article explains how you can adequately highlight specific parts of your web app by detecting and selecting the right element using CSS selectors.
Note: You can also check our video tutorial on how to select your desired HTML element through the Custom CSS Selector option.
Detecting elements and connecting them to UserGuiding components
You can find the HTML elements and their CSS selectors by a simple right-click on your platform page and inspecting the desired element in your browser’s console.
Then you can enter the CSS selectors by enabling the CSS Selector option in the Chrome extension settings of your guide component (tooltip or input) or your hotspot.
Right-click & inspect your element
Select a class name or an ID of your element
Copy the desired CSS selector (in this example, we select an ID) and paste it by adding # before it
In this example,
“g” is the HTML element we want to select
“book-book” is the ID we’ll use as a CSS selector
We advise using the IDs as they are more specific than classes found in multiple HTML elements
If you want to use the class name of an element, you need to put a dot (.) before the CSS selector’s name; if you want to use an ID, you need to put a hashtag (#)