1. Pendo Help Center
  2. Community
  3. Guides

Javascript Support - Dismiss on hover

Avatar
Qlik Migration Admin

Hi all, we are using the following snippet for a tooltip that appears when you hover over a target element. The code allows it to dismiss when you click outside the guide: https://github.com/pendo-io/snippets/blob/master/guides/dismissingGuides/dismissWhenClickOutsideGuide/dismissWhenClickOutsideGuide.js

We want to change this to hover - so it will dismiss when you stop hovering over the element or the guide. You can easily do this by changing the words "click" to "mouseover" in the code and it works. HOWEVER, unfortunately, it dismisses so fast when you try to move from the element to the tooltip that its difficult to get it to stay long enough to get your mouse over the guide! 

I have played around with various set-timeouts to the function but cannot get success. We want some version of this: https://stackoverflow.com/questions/12936103/how-do-i-execute-a-function-after-a-two-second-hover where the code only triggers if you're hovering over document for 2 seconds, and if you hover over the element/guide again it restarts. Can someone provide the right syntax for me?

1

Comments

1 comment
Date Votes
  • Avatar
    Qlik Migration Admin

    Hi, here is the code for a solution to this. It is a combo between the "dismiss when click outside of guide" + 'mouseover' + "dismiss when leave element hover" + a timeout and a clear timeout. The only thing we will be trying to add is a clearTimeout when hovering over the guide element, since right now if you hover over the element to activate, then hover over document and back to guide before the 1.5s, it will start the timeout but not dismiss (since you're hovering over the guide now), meaning it will disappear right away when you leave the container. So if we add a "else clearTimeout" it should function correctly. 

    (function dismissWhenClickOutsideGuide(dom) {
    function dismissGuide(e) {
    if (
    !dom(eventTarget(e)).closest('#pendo-guide-container').length &&
       !dom(eventTarget(e)).closest(step.elementPathRule).length
    ) {
    pendo.onGuideDismissed();
    }
    };
     
    hoverTimeout = setTimeout(function () {pendo.attachEvent(document, 'mouseover', dismissGuide); },1500)
     
    function eventTarget (e) {
    return (e && e.target) || e.srcElement;
    }
    function clearHoverTimeout() {
    clearTimeout(hoverTimeout);
    }
    // step wrappable method to clear all event listeners
    step.after('teardown', function () {
    pendo.detachEvent(document, 'mouseover', dismissGuide);
    });
     
     
    // Wire events to elements
    (function wireGuideAdvanceButton (step) {
    step && step.attachEvent(step.guideElement[0], 'click', function (e) {
    var advanceButton = pendo.dom(e.target || e.srcElement).closest('#pendo-button-4820ab8e');
    if (advanceButton.length) {
    pendo.onGuideDismissed();
       pendo.detachEvent(document, 'mouseover', dismissGuide);
       clearHoverTimeout();
    }
    });
    })(step,guide);
     
    })(pendo.dom);
    1

Please sign in to leave a comment.

Didn't find what you were looking for?

New post