[BUG] When using same single tooltip on page but changing delayShow, tooltip shows after mouseleave

[rgoldstein22]

Bug description
If you are using one tooltip component and then different elements change the delayShow prop, it will show the next tooltip after mouseleave.

Version of Package
v5.26.4

To Reproduce
Use one component <ReactTooltip id="test"/>
Then use data-tooltip-id="test" on multiple elements. Give elements different values for attribute data-tooltip-delay-show
Then hover on the first element using that tooltip, and mouseleave the element and see tooltip delay show

Expected behavior
I would expect the tooltip to delay show, then hide, and remain hidden until I hovered on another element

Screenshots

Desktop (please complete the following information if possible or delete this section):

• OS: Sonoma 14.5
• Browser Chrome
• Version 126.0.6478.127
• Frameworks React 18

Additional context
Add any other context about the problem here.

[gabrieljablonski]

This does not seem like an issue with just the data-tooltip-delay-show attribute.

It mainly relates to the tooltip anchor being unmounted after triggering the tooltip with the delay. By default, if the tooltip doesn't find the original anchor, it attaches to the first anchor that is available.

I've managed to create a simple example reproducing the issue.

https://stackblitz.com/edit/vitejs-vite-bbqqcx?file=src%2FApp.tsx

2024-07-02_17-37-38.mp4

I might be able to get to it this week, so we'll let you know when we have a fix for it.

[gabrieljablonski]

This beta release should fix it react-tooltip@5.27.0-beta.1205.rc.0

Please let us know if it works for your project, and check PR #1205 for more info if you're interested.

Assuming it is fixed for you, we will close this as soon as we release an official version with the fix.

[rgoldstein22]

Yes, this code fixes the issue in my project. Thank you!

[gabrieljablonski]

Official release with the fix react-tooltip@5.27.1