How to Place Hotspots & Tooltips on Drop-downs, Pop-outs, and More

Many pages have elements that aren't immediately visible upon page load. We call these dynamic elements. Drop-down menus and pop-out modals are common dynamic elements that require a user's action (clicking a button, tab, or menu) in order to be exposed. 

By mimicking user action while using the editor, you can place hotspots and tooltips on most dynamic elements to create flows similar to this:


Hotspots On Dynamic Elements

  • Hotspots work independently from each other and will appear at once as a group: if any hotspots in your flow are on dynamic elements, all other hotspots will appear first and continue to persist (unless clicked) until the dynamic element is exposed 

Tooltips On Dynamic Elements

  • Tooltips are sequential and will always launch in order: if your first tooltip is hidden on a dynamic element, the entire flow will not appear until that element is visible to your end user
    • We recommend placing the first tooltip in a sequence on an immediately-present and visible element so that your user is not required to find the tour themselves


Placing Hotspots & Tooltips On Dynamic Elements

To place hotspots and tooltips on dynamic elements:

  1. Navigate to the page where these elements will appear and create a new hotspots or tooltip
  2. Hold down shift to expose the dynamic element (shift + click the dropdown, shift + click a button, etc)
  3. Place the tooltip or hotspot on the now-exposed element
  4. Hold shift and click off to hide the dynamic element

Notes:

  • In the editor, when your element is not exposed you will see a red error message that states "This [hotspot/tooltip] isn't attached to anything visible right now. Click to reposition" -- you can still edit your text/HTML here and when your element is again exposed, the tooltip or hotspot will re-position itself onto it
    • You can also preview your flow to verify that your tooltip or hotspot is attached to the right element (click the eye icon in the bottom right of your editor to preview your current flow)
  • While most hotspots and tooltips can attach to most dynamic elements, there are still a few that are not supported: these are typically elements that appear and disappear upon hover
  • If your dynamic element exists on a different URL, you'll have to create a separate flow on that URL to place hotspots or tooltips down

Still need help? Contact Us Contact Us