KABBOUCHI / vue-tippy

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

Delay tooltip init #280

Open Durss opened 1 year ago

Durss commented 1 year ago

First of all, thank you for that excellent lib <3

Now, I have a list of hundreds of images (twitch emotes) and I want to show an HD version of that image in a tooltip on hover. It works nice but first render is drastically slowed down by tippy.

Is there any way I could delay that init or make it lighter ? I tried using the singleton with no much success (i guess all the handlers are still created on every item)

I could build items sequentially instead of all at once but that would make a lesser UX :/ I'm using v6.

Kind regards

Durss commented 1 year ago

Okay i think i found a solution. Always happens after asking of course. I kinda rubber ducked you sorry ahah

My solution is rather simple, on @mouseover of the image i create the tip. Here is a simplified example:

onHoverItem(event) {
    useTippy(event.currentTarget, {
        content: "<img src=....>",
    });
}