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

3 comments
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
  • Avatar
    Eric Miller
    Conversation starter
    Expert (Gold)
    Idea generator
    Great answers

    Qlik Migration Admin simpler solution can be found here. Just drop this into a code block in your guide.
    https://github.com/pendo-io/snippets/tree/master/guides/dismissingGuides/dismissGuideOnLeaveHover

    0
  • Avatar
    Qlik Migration Admin

    Hi Eric Miller, we did already check out this snippet but we need it to include the container as well as the badge element. So if they hover over the element, the tooltip appears, they may want to hover over the tooltip to click a button on it and it needs to be still open. So a timeout is also needed so that if they're trying to move mouse from element to guide container and aren't exactly on each element it doesn't immediately disapear. 

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post