Don't show multiple tooltips at once in a generated list of tooltips

[danchristian]

I have a list generated by Vue and each item contains a tooltip, however currently I can open 2 at the same time when clicked. Ideally if one is open and you open another one, the first would close. The demos on tippy.js seem correct in this behaaviour and it seems that multiple: false, is set as the default in the options, so not sure what I'm doing wrong?

button(
  @click.stop, 
  v-show="withdrawal.CommentsList.length > 1",
  v-tippy="{ html: '#comments', trigger : 'click', interactive: true, reactive : true}")
ol(id="comments")
  li(v-for="comment in comments") {{ Comment }}

Default State:

State after both buttons clicked:

[KABBOUCHI]

When you use reactive option (reserve event listeners), you only can use 1 html/component element per tippy instance

Can you setup a small demo so i can fix it or modify your codes? (https://codesandbox.io/s/vue or github repo)

[danchristian]

I have created a demo here https://codesandbox.io/s/z6my0n2p13 and have realised it is the @click.stop that is causing the behaviour. The button to open the tooltip is within an <li> which itself is selectable, that is why I am using @click.stop on the tooltip button, othwerwise it selects the parent <li>.

I guess I could make the tooltips react on hover, rather than click as a tempoary workaround. Unless there is another way?

[KABBOUCHI]

u can add @mouseleave="($event) => $event.target._tippy.hide()"

https://codesandbox.io/s/yyx92969

[danchristian]

That then means you can't interact with the tooltip as when you leave the button it closes it.

[KABBOUCHI]

maybe you can manage tippy instances like this https://codesandbox.io/s/82kz5m06k9 ?

[danchristian]

Thank you for your help and apologies for not replying. I gave the sample code a go but in the end have stuck with a hover interaction instead of a click to keep things simple.