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

Question

使用 tippy.js 和 jQuery。

我希望我的脚本做的是，如果用户将鼠标悬停在带有 class .ajax-link 的 link 上，应该创建一个工具提示并在悬停时显示link:

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

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

    return false;
});

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

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

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

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

这是一个示例，您可以明白我的意思 - 将鼠标悬停在 link 上并移动光标 - 同时查看 DOM 最底部的检查器 -你会看到正在制作几个实例。

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

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

<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>

<!-- Development -->
<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>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

我只想让它制作一个 ID 为 #tippy-1 的工具提示。

Answer 1

设法找出问题所在。

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

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

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

Tippy.js generating several instances in DOM when expecting only one

jquery

tippyjs