Tippyjs: Reset a tippy instance

Created on 26 Jul 2019 · 4Comments · Source: atomiks/tippyjs

I have the code below. I want the tooltip to show up on the mouse, and then go away when the mouse moves. This works with the code below.

However, I want the tooltip to show again if the mouse stops moving, but this does not happen. It happens if I move off the element and move back on to it though.

Is there a way to reset the tooltip so that the mouse does not need to be moved off?

window.addEventListener('DOMContentLoaded', function(e) {
            tippy("#tooltip", {
                animation: 'scale',
                duration: 200,
                placement: "bottom",
                arrow: false,
                followCursor: "initial",
                delay: [500, 200],
                onShown: function (e) {
                    document.getElementById('po-table').addEventListener('mousemove', function (e2) {
                        e.hide(200);
                    });
                },
            });
        });

💡 question

Source

gclark18

All 4 comments

You can add a timout inside onShown, something like that:

if (x) clearTimeout(x);
x = setTimeout(e.show , 200);

and you will also need to stop it when mouse is outside the element
so to wrap it all up you'll need something like this:

    onShown: function(e) {
      myElement.addEventListener("mousemove", function() {
        e.hide(200);
        if (x) clearTimeout(x);
        x = setTimeout(e.show , 200); 
      });
      myElement.addEventListener("mouseleave", function() {
      if (x) clearTimeout(x);
      });
    }

here is a small codepen to see it in action : https://codepen.io/wyzix33/pen/rXWyoP

Hope it helps