tippyjs-react
tippyjs-react copied to clipboard
atomiks
Hide has a short delay even though `delay` prop set to 0
I made a simple navbar by using Tippy. Then I realize the child items are hidden after a small period of time like it has a short delay (feel like 10-50 ms). I thought it was a default, then I try to set the delay to 0 and [0,0], but it still happens.. If I set delay to [500, 1000], it's not really that visible, but when I want to make it hidden directly, it has a short delay.
Can anyone tell me what;s going on? You can try it by make sandbox on Codesandbox.io, add @tippyjs/react, make a simple Tooltip, and you can feel there is a delay on hide.
If delay is set to 0, tippy uses requestAnimationFrame to fire up instance.hide() event asynchronously. It might be possible that due to high CPU usage, the event might be delayed by the browser engine slightly.
I personally haven't experienced such delays with tippy, but it is pretty common in the JS world for setTimeout/requestAnimationFrame to run later than expected.
Here's related code: https://github.com/atomiks/tippyjs/blob/0b10cfbf72d8db7932b371f24ff78d2ad140a0d5/src/createTippy.ts#L809-L821
Have you tried mounting your tippys to a separate <div> container inside <body>, not <body> itself? There can be performance issues if you have a large number of nodes in the document.
For anyone coming here using react-tippy based on the readme, to make hide delay as fast as possible when you want a show delay you can pass an array to delay like [showDelay, hideDelay] if you want them to be different.
This took me for a bit of a spin, as I'd assume that the default desired behavior for delay would only be to delay the showing. Anyway, hopefully this helps someone.
@KubaJastrz There is definitely something strange going on:
In this example notice when u hover out of [500, 0] it immediately closes it (no animation) and this is the desired outcome.
Now on the same page, check out the example on [800,0]. Notice the sluggish exit animation even with 0ms close delay.
This is clearly a bug.
@AakashMallik
What do you mean by "sluggish exit animation"? It looks smooth to me (windows 10, brave browser).
delay: 0 means that the animation starts roughly at 0ms after the mouse leave event, not that there is no animation (like in duration: 0).
@AakashMallik
What do you mean by "sluggish exit animation"? It looks smooth to me (windows 10, brave browser).
delay: 0means that the animation starts roughly at0msafter the mouse leave event, not that there is no animation (like induration: 0).
In that case, the two examples I have linked from the doc are inconsistent in behaviour. One animates out, while the other abruptly disappears. But I think u made the prop clear to me. I'll check what can be done from my end to get the desired result I am looking for.
@KubaJastrz I just realized how dumb I am. I was comparing examples between delay and duration 😢 . Sorry to waste your time.
