Display guide on Element Hover

Hi there, we have a guide that displays when a user hovers or clicks a badge. Awesome! 

We basically want to display the guide when the user hovers over anywhere on the element that the guide is targeted to. In the picture, this means I want the guide to pop up when they hover over "Share", and not just the green dot itself (which is the badge).

I've tried a combination of "advance on element click" and "advance on element hover" but of course this only refers to going from step 1 to 2, rather than just triggering step 1. In addition, these actions are blocked until you first hover over the badge anyway. This prevents me from doing a workaround where I duplicate step 1 into 1 and 2, and trigger on hover. 

If there is a code available to put into the guide that makes it show on element hover, please let me know. 

1

Comments

2 comments
  • Hi, I have developed the code with 2 smooshed together from github.


    (function(dom, _) {

      function pendoHideGuide() {
        console.log('base: ', dom('#pendo-base'));
        _.each(dom('#pendo-base'), function(elm) {
          elm.style.display = "none";
        })
      }

      function pendoRevealGuide() {
        _.each(dom('#pendo-base'), function(elm) {
          elm.style.display = "";
        })
      }
        
     // Hide guide immediately if not in Pendo Designer
      if (!pendo.designerEnabled) {
        pendoHideGuide();
      }

        };
    function simulateMouseover() {
      var event = new MouseEvent('mouseover', {
        'view': window,
        'bubbles': true,
        'cancelable': true
      });
      var myTarget = document.getElementById('your-element'); 
    }
    function mouseOverBehaviour() {
        myElement = document.getElementById("your-element");
         // attach mouseover event listener to element
        myElement.addEventListener("mouseover", function(event) {
            // function!!!
            pendoRevealGuide();
        });  
        // call the simulation
        setTimeout(simulateMouseover,3000);
    }

    mouseOverBehaviour();
    })(pendo.dom, pendo._);

     

    This works great - except...

    You have to set this guide activation to "automatic" and "badge", which means that the above code is reliant on the "automatic" trigger - when it appears automatically, immediatly hide it and complete the functions. SO... when a user clicks X or a button to advance/dismiss, the badge remains (great!) but the hover functionality is lost. 

    We need a way to configure a guide to automatic - always appears! 

    0
  • Current workaround is to have the "Done" button (and eventually the close buttons) for each step lead back to step 1, essentially triggering it again, but with the code, it still doesn't show unless you hover. 

    1

Please sign in to leave a comment.

Didn't find what you were looking for?

New post