Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hide has a short delay even though delay prop set to 0 #328

Open
relogix opened this issue Sep 6, 2021 · 9 comments
Open

Hide has a short delay even though delay prop set to 0 #328

relogix opened this issue Sep 6, 2021 · 9 comments

Comments

@relogix
Copy link

relogix commented Sep 6, 2021

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.
@KubaJastrz
Copy link
Contributor

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.

@KubaJastrz
Copy link
Contributor

Here's related code: https://github.com/atomiks/tippyjs/blob/0b10cfbf72d8db7932b371f24ff78d2ad140a0d5/src/createTippy.ts#L809-L821

@atomiks
Copy link
Owner

atomiks commented Oct 4, 2021

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.

@jessep
Copy link

jessep commented Nov 4, 2021

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.

@Pipe-Runner
Copy link

@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.

@KubaJastrz
Copy link
Contributor

KubaJastrz commented Feb 15, 2022 •
edited

@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).

@Pipe-Runner
Copy link

@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).

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.

@Pipe-Runner
Copy link

@KubaJastrz I just realized how dumb I am. I was comparing examples between delay and duration 😢 .
Sorry to waste your time.

@RokasDie
Copy link

For me, animation:false, fixed the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@jessep @KubaJastrz @Pipe-Runner @atomiks @relogix @RokasDie