Search code examples
jquerytippyjs

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

Using tippy.js and jQuery.

What I'm hoping my script does is that if a user hovers over a link with the class .ajax-link, a single tooltip should be created and display when hovering over the link:

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

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

    return false;
});

This works, but unfortunately it seems to have some odd behaviour in my implementation.

It seems that when I hover over the link that several instances of the tooltip are created in the DOM, not one (as expected).

In the inspector I can see #tippy-1 (the first one and the only one I care about), but after that I'm also seeing #tippy-2, #tippy-3, #tippy-4 etc. being generated.

When the cursor leaves the link, all of the instances are destroyed (as intended), so that's okay, but like why are so many instances being generated in the first place? I'm expecting to see just #tippy-1 when I mouseover, not several others as well.

Here's an example so you can see what I mean - hover over the link and shimmy your cursor around - at the same time look at inspector at the very very bottom of the DOM - you'll see several instances being made.

$(".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>

I just want it to make one tooltip with the id #tippy-1.

Solution

  • Managed to figure out what the problem was.

    I was calling tippy inside the event handler, so every time I moused over the element it was creating a new tippy instance - that's why I was seeing all the other tooltips in the DOM.

    So I put the tippy stuff outside of that handler, standalone, and it worked a charm.