Display step on element_focus

• 

  Ryan Durbin

  November 17, 2023 17:19

  My recommendation is a technical one using Javascript so it may be more complex than you hoped but could work. You may find some good info here from a similar question: https://support.pendo.io/hc/en-us/community/posts/6288447543451/comments/6291643215899

  You could have the guide automatically launched on the page where your step 1 of the guide is an "Invisible step." Step 1 would be a tooltip pointing to the element you care about the user hovering over. This step would contain a custom code block in it with CSS and Javascript in it. When the user hovers over the targeted element, your guide will advance to step 2 which should have the guide you want to show on hover.

  Note: This logic will only work to show the guide the first time the user hovers over the element. Also, if any other Pendo guides are launched before the user hovers over the element, you may see unexpected behavior (guide doesn't launch bc your intended guide isn't already on step 1 to advance to the next step, newly launched guide could advance a step if the user has guide B visible and hovers over the targeted element). Little complex here but should be mentioned since this would be a custom implementation to achieve what you want, which is outside of the box of current Pendo functionality that I'm aware of.

  CSS:

  display: none !important;

  this will hide the step from the end user since you're only using this step for the JS logic

  JS:

  add a mouse over event listener for when the user hovers over your target element (https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event)

  var specifiedElement = document.querySelector('<class to identify hovered element>');
  var handler = function(event) {
    if (specifiedElement !== null) {
       window.removeEventListener('mouseover', handler, true);
       pendo.onGuideAdvanced();
    }
  }
  
  window.addEventListener('mouseover', handler, true);

  0

Please sign in to leave a comment.