0

使用tippy.js 和jQuery。

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

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

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

    return false;
});

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

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

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

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

这是一个示例，因此您可以了解我的意思-将鼠标悬停在链接上并四处晃动您的光标-同时查看 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。

4

1 回答 1

0

设法找出问题所在。

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

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

于 2021-03-04T02:35:14.590 回答