Target an element for more context

When you create a Jimo's experience, you have the option to incorporate Hotspots & Tooltips. These interactive features are specifically designed to offer additional information within the flow of the content, without being disruptive. They serve the purpose of contextualizing and drawing attention to a particular element on the page.

Moreover, the functionality allows you to choose elements from your platform's interface and anchor the tooltips & hotspots to them. You have the flexibility to create a singular Tooltip/Hotspot or a series of them as part of a comprehensive product tour, guiding users through various features and functionalities.

How to select an element in Jimo

Once a new step has been added that requires an element to be selected, you'll notice that a highlighted rectangle follows the cursor around the screen, Jimo’s builder is picking up every CSS element that you might want to attach the step to.

When the element you want to attach your step to is highlighted, you can simply click on it. This will allow you to move to the next step and explore additional settings that are available.

In our builder, once an element has been selected, we take care of determining the optimal positioning for displaying the UI pattern. Additionally, we generate a CSS selector specifically for that element, making it easier for you to reference and modify it as needed.

You have the option to choose how the card should be positioned. By selecting "Auto," Jimo will handle the positioning for you, ensuring that it is optimal based on the position of the targeted element and the size of the window. If you prefer more control, you can choose "Fixed" to force the card to be positioned around the targeted element. Alternatively, selecting "Custom" will allow you to position the card exactly where you want it, giving you maximum flexibility and control over its placement.

You also have the ability to add a pointer for tooltips and to set a manual z-index in case you want to have control over it so it is displayed exactly where you want in your different app layers.

Since this process is unique for every web app, it is useful to know how to make manual adjustments just in case you need to.

Manual element detection

It is crucial to ensure that the selected element is accurately detected to avoid a situation where an experience fails to trigger. To achieve this, you have the option to manually modify the CSS selector and specify the element to which the step is attached. This feature empowers you to modify the CSS selectors for the tagged element and customize the detection process according to your needs.

What is a CSS selector?

Elements on a web page are represented as boxes and can be identified using HTML and CSS. Jimo uses CSS Selectors to identify the selected element, which are used to target specific HTML content in your web app. CSS selectors offer a wide range of options for precise element selection and styling, including id, class, type, attribute, and more.

To find the HTML content and its associated CSS selectors for a specific element, simply right-click on the element and select "Inspect". If you need more information, it is advisable to consult with your developers.

When should I manually adjust the CSS selectors?

We recommend manually adjusting the CSS selectors only if your experience step does not appear as expected. Some examples of these cases could be when:

• The element couldn't be properly detected on the page which happens in very few cases

• The unique element couldn't be found due to the presence of too many similar elements on the page

Pro tip: If your selected element might not appear and you want to continue your experience, consider enabling the option "Skip if target element not found" option.