如何在swiper.js的slideChange事件中调用其他文件的tippy.js实例方法？

问题出在你每次触发slideChange时都重新调用tippy($('.tippy'))——这会创建新的tippy实例，而非获取已初始化好的实例，因此调用hide()无法控制之前的弹窗。

这里提供两种可靠的解决思路：

思路一：保存初始化时的实例引用 #

在初始化tippy阶段，就把实例存储到全局或可访问的变量中：

// 初始化tippy时保存所有实例
window.tippyInstances = tippy('.tippy', {
    allowHTML: true,
    theme: 'light div lg',
    offset: [0, 16],
});

随后在swiper的事件回调里直接操作这个存储的实例集合：

window['swiper_'+id].on('slideChange', function () {
    console.log('slide changed');
    // 遍历所有tippy实例并执行隐藏
    window.tippyInstances.forEach(instance => {
        instance.hide();
    });
});

思路二：通过DOM元素获取已绑定的实例 #

tippy会自动将实例绑定到目标元素的_tippy属性上，你可以直接通过DOM元素获取对应实例：

window['swiper_'+id].on('slideChange', function () {
    console.log('slide changed');
    // 遍历所有带tippy类的元素，隐藏对应实例
    document.querySelectorAll('.tippy').forEach(el => {
        if (el._tippy) {
            el._tippy.hide();
        }
    });
});

如果使用jQuery，需要先将jQuery对象转为原生DOM数组，比如$('.tippy').get()后再遍历。

若只需隐藏特定范围内的tippy（比如当前slide外的），可以结合swiper的当前slide类名调整选择器进行精准筛选。

内容的提问来源于stack exchange，提问作者MeltingDog