Tippy.js 在只需要一个实例时在 DOM 中生成多个实例

问题描述

使用tippy.js 和jQuery。

我希望我的脚本能做的是，如果用户将鼠标悬停在类为 .ajax-link 的链接上，则应创建一个工具提示并在悬停在链接上时显示：

  $(".ajax_link").mouseenter(function(e) {

    tippy(this,{ content: 'loading',followCursor: true,delay: 0});

    return false;
});

这有效，但不幸的是，在我的实现中它似乎有一些奇怪的行为。

当我将鼠标悬停在链接上时，似乎在 DOM 中创建了几个工具提示实例，而不是一个（如预期的那样）。

在检查器中我可以看到 #tippy-1（第一个也是唯一一个我关心的），但之后我也看到了 #tippy-2、#tippy-3、{{1 }} 等正在生成。

当光标离开链接时，所有实例都会被销毁（如预期的那样），所以没关系，但是为什么首先生成了这么多实例？我希望在鼠标悬停时只看到 #tippy-4，而不是其他几个。

这是一个示例，您可以了解我的意思 - 将鼠标悬停在链接上并左右移动光标 - 同时查看 DOM 最底部的检查器 - 您会看到正在创建的多个实例。

#tippy-1

$(".ajax_link").mouseenter(function(e) {

    tippy(this,delay: 0});
    
    return false;
});

我只想制作一个 ID 为 <br><br><br><br> <center> <a href="#" class="ajax_link">Link</a> </center> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>  <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> 的工具提示。

解决方法

设法找出问题所在。

我在事件处理程序中调用了tippy，所以每次我将鼠标悬停在元素上时，它都会创建一个新的tippy实例——这就是我在DOM中看到所有其他工具提示的原因。

所以我把这些小东西放在那个处理程序之外，独立的，它很有魅力。

jquery tippyjs