Faulty CSS Selectors
This document talks about CSS selectors. If you're not sure what those are, check out this guide on CSS Selectors.
Hotspots or tooltips may not appear if our SDK cannot identify the specific elements which the hotspots or tooltips are set to attach to.
This usually happens for three reasons:
- The particular element doesn't exist in all instances of the same URL
- The CSS selectors your tooltips or hotpots are attached to are dynamically generated
- The element is being identified by too generic CSS selector that also refers to other elements on the same page
1. Missing elements
If you place a tooltip or hotspot on an element that doesn't exist in all instances, your flows will not show up when those elements don't appear.
For example, in the image below we have a tooltip placed on Project 2. If a user doesn't have two projects, the tooltip would not appear on this page as it would be seeking a CSS selector for the second project.
2. Auto-generated selectors
Sometimes your elements will be visible in all instances, but they might have auto-generated attributes (classes, IDs, etc). In this case, elements in your HTML markup will look like this:
In order to get your tooltips/hotspots to display properly, remove the auto-generated portion of the CSS selector.
In the Appcues editor, click on the cog icon next to the tooltip or hotspot you would like to adjust: You will now see the auto-generated CSS selector being used to position your step. Here are instructions on other methods of representing an attribute. For instance, if you had the following CSS selector
div.menu-panel__2Hkc9 > header
You could replace the auto-generated portion by adjusting it to:
div[class^=menu-panel__] > header
3. Generic CSS selectors
If CSS selectors are too general and can be refer to more than one element on your page, tooltips or hotspots cannot identify which element to appear on and therefore will not show.
To get your flows appearing on the correct elements, identify a more unique selector by inspecting the element on your page. Once you have a more specific selector, click on the cog icon of the hotspot or tooltip you would like to adjust and then add the unique identifier in the Selector field.
Save your new selector and preview your flow to make sure it works.