Multiple HTML instances vs one

Hi there,

First off thanks for a lovely tooltip library! The docs are extensive, the tooltip itself is more-than-plenty configurable and it’s been a breeze to use so far!

Not sure if this is a bug report or simply me misusing tippy, but I’m trying to add an interactive options menu to every item on a list with Vue. Since an html template via direct ref is only usable once, I’ve set up my loop so that every list item’s options menu also renders its own tooltip contents. Then, in the component’s mounted hook, I’m looping through the generated menus and initialising tippy on each:

mounted () {
  const tooltips = document.querySelectorAll('.filter-tippy')

  ;[].forEach.call(tooltips, tooltip => {
    if (tooltip._tippy) return
    tippy(tooltip, {
      html: tooltip.querySelector('[data-template]'),
      appendTo: tooltip.parentNode,
      animateFill: false,
      performance: true,
      placement: 'bottom'
    })
  })
}

Current behaviour:

I also found https://github.com/atomiks/tippyjs/issues/10 and the mention of multiple, but that doesn’t seem to work for me so i’m wondering if it’s the case of creating multiple instances of tippy?

When I tried to replicate this behaviour in your Codepen template, then it works as expected (an active tippy is closed before opening a new one). The bug shouldn’t be anything vue-specific since I’m initiating tippy with vanilla JS. Any other information I could provide to further debug this?

Replication: https://codepen.io/ajv/pen/OoaWLB

How should I approach this situation? I thought of also having a single instance, but then I couldn’t pass the item’s data object to the listener and would have to read certain attributes from the event target’s data attributes, I presume.

[atomiks]

Okay I think I found the issue:

You’re using @click.stop which stops the click event from propagating up the DOM tree to the document. The document has a global click listener which handles hiding all tooltips on the document that are visible. So, either you can use the hack posted above, or remove @click.stop and replace it with something else.

[atomiks]

Yeah, Methods only lists tippy instance methods, but static methods should be listed too