How do I apply methods to a tippy.js instance from another file?

Question

I am using tippy.js and swiper.js.

I am setting Tippy up as such:

tippy('.tippy', {
    allowHTML: true,
    theme: 'light div lg',
    offset: [0, 16],
});

This works fine.

However, I would like to close/hide tippy instances when a swiper.js has a slideChange event.

On my swiper init file I have:

 window['swiper_'+id].on('slideChange', function () {
    console.log('slide changed');
    const thisTippy = tippy($('.tippy'));

     thisTippy.hide();
 });

But of course this doesn't work.

Would anyone know how I could access the tippy instance from within the my swiper?

Answer 1

You need to target that particular tooltip's instance. Something like this:

const tippyInstance = tippy(".tippy", {
  allowHTML: true,
  theme: "light div lg",
  offset: [0, 16],
});

window["swiper_" + id].on("slideChange", function () {
  console.log("slide changed");

  tippyInstance.hide();
});

---

Docs

1. https://atomiks.github.io/tippyjs/v6/tippy-instance/
2. https://atomiks.github.io/tippyjs/v6/methods/#hide

Answer 2

The slideChange event exposes the swiper instance. With that instance you can get the current slide element. From there you can traverse the slide element and look for your tippy element.

Store the tippy instance in a variable to be able to close it whenever you get to the next slide.

let currentTippy = null;

window["swiper_" + id].on("slideChange", function (swiper) {
  if (currentTippy !== null) {
    currentTippy.hide();
  }

  const { slides, realIndex } = swiper;
  const currentSlide = slides[realIndex];
  const tippyEl = currentSlide.querySelector('.tippy');

  currentTippy = tippyEl === null ? null :
    tippy(tippyEl, {
      allowHTML: true,
      theme: 'light div lg',
      offset: [0, 16],
    });
});