Does vue(3)-tippy have grouping?

[joonaspaakko]

It looks like the grouping method that was talked about here #263 doesn't work in v6. I don't know if this is the only issue, but so far it's stuck on import { tippy } from "vue-tippy" → tippy.group == undefined.

This is the same working codesandbox from that original question, I just upgraded to Vue 3 and vue-tippy v6: https://codesandbox.io/s/tippygroup-example-vue-3-zr08dq?file=/src/TippyGroup.vue:568-667

[KABBOUCHI]

check the example here https://github.com/KABBOUCHI/vue-tippy/blob/next/playground/pages/SingletonComponents.vue

will add the documentation in few days

    <tippy-singleton move-transition="transform 0.2s ease-out" placement="top">
      <tippy  v-for="i in 10" :key="i">
        <template #content>
          <div>Working tooltip</div>
        </template>
        Button {{ i }}
      </tippy>
    </tippy-singleton>

edit: added a basic example https://vue-tippy.netlify.app/flavor/component/#singleton https://vue-tippy.netlify.app/flavor/composition-api#singleton

[joonaspaakko]

I have a problem. I used to have some props and a couple of events on each of the <tippy> components and it seems like they don't do anything on the <tippy> components when they are inside a <tippy-singleton>. I suppose it makes more sense to have the props in the singleton instead, but I have an issue with the events. For example the @show event in the singleton doesn't seem to fire for each individual tooltip, in fact, I'm not super sure what the logic is to be honest.

I had a setup where I did somewhat heavy processing for each tooltip on "show" to "load" additional data. So even if the singleton events fired for each individual tooltip on "show", I'd need some way to access the v-for item in the onShow event, which was pretty much automatic when each <tippy> component had their own events.

https://codesandbox.io/s/tippygroup-example-vue-3-forked-zvj9ny?file=/src/App.vue:29-191

---

I noticed singleton was a new thing, but I failed to make the connection that it's a "group". Looking at the documentation example it's kind of obvious, but last night I tried to search for a "group", found nothing and gave up on the documentation. I might just steal tippy.js description for the vue-tippy documentation:

Use a single tippy for many different reference elements. This allows you to "group" tooltips with a shared timer to improve UX when elements near each other have tooltips with a delay prop.

Maybe slightly modified:

Singleton can be used to group multiple tooltips with a shared timer to improve UX when elements near each other have tooltips with a delay prop.

[KABBOUCHI]

all of them share the same tooltip, @show will trigger once, but u can use @trigger on the singleton component

https://vue-tippy.netlify.app/props#ontrigger

 <tippy-singleton move-transition="transform 0.2s ease-out" placement="top" @trigger="onTrigger">
      <tippy  v-for="i in 10" :key="i">
        <template #content>
          <div>Working tooltip</div>
        </template>
        Button {{ i }}
      </tippy>
</tippy-singleton>

https://codesandbox.io/s/tippygroup-example-vue-3-forked-xvv2sr?file=/src/App.vue:193-214

[joonaspaakko]

That's great!

What I did isn't incredibly sophisticated but I needed some way to access the v-for item during this "on show" event (onTrigger) and so what I ended up doing was:

1. Attaching some new data-attributes to the <tippy> component.
   • <tippy v-for="(item, index) in dataItems" :key="item.id" :data-item-index="index" :data-item-id="item.id">
2. And inside the onTrigger callback I fetch the data attribute from the event.target and I can then use it to identify the current item (object) tippy is active on.
   • onTrigger( t, e ) { console.log( e.target.getAttribute('data-item-index'); }

https://codesandbox.io/s/tippygroup-example-vue-3-forked-h42110?file=/src/App.vue:990-1052

[joonaspaakko]

Just in case someone is doing something similar, one thing that caught me super off-guard was how in v6 the prop interactive: true now auto defaults appendTo: "parent" instead of the default document.body.

So in my case, I have tippy in a carousel slider, which has overflow: hidden around it for obvious reasons. So coming from an earlier version of vue-tippy, I had to round up all the cats and dogs to track down why all of a sudden my tooltip became seemed to work but was nowhere to be seen. Turns out the tooltip used to be in <body> and now it was inside the carousel slider's wrapping element and overflowing to the hidden area.

Simple enough fix once I figured out what was the root cause, I just added a new appendTo prop that forced the tooltip back to document.body. It's mentioned in the documentation next to the appendTo prop.