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:

  1. The particular element doesn't exist in all instances of the same URL
  2. The CSS selectors your tooltips or hotpots are attached to are dynamically generated
  3. 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: 

Auto-generated attributes (like "core___2PzPF" above are common in certain javascript frameworks like React.js and Ember.js. These IDs are randomly generated on each page load. As such, Appcues won't be able to automatically determine the best CSS selector to use when building your Appcues hotspots or tooltips.

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.

Still need help? Contact Us Contact Us