search

KABBOUCHI / vue-tippy

VueJS Tooltip powered by Tippy.js
https://vue-tippy.netlify.app
MIT License
722 stars 86 forks source link

Does vue-tippy have grouping? #263

Closed joonaspaakko closed 1 year ago

joonaspaakko commented 1 year ago

Tippy has grouping, but does vue-tippy have it? I looked around but I couldn't find any signs of it. Couldn't find the group() method in the tippy instance and I couldn't find any documentation about it.

I managed to get similar behavior using the @show and @hide events to manage a setTimeout, but the animation was still a bit problematic. I found some posts with people saying you can disable the animation (for each individual tooltip), but I couldn't get that to work and I couldn't be bothered to do anything fancy, so I just disabled the animation for these grouped items. The css is inside the template only because I considered manipulating it to only animate on the first show, but it was too much work. The Vuex mutations that control the "group activity" is in the main.js.

KABBOUCHI commented 1 year ago

I've created a simple TippyGroup component, u can check it here https://codesandbox.io/s/vue-tippy-poor-mans-grouping-forked-jz7tdx?file=/src/App.vue

I've released a new version and added data-tippy-component-trigger attr to make it a bit easier for you, you can see it in TippyGroup.vue

joonaspaakko commented 1 year ago

Thanks! Works like a charm.

GIF