[BUG] Position not correct alongside react-window / react-virtualized-auto-sizer

[pickhardt]

Bug description

I had some code that was working correctly with react-tooltip, and a few hundred items. I then used react-window and react-virtualized-auto-sizer but now the tooltips show up in the top left corner of the webpage. They are not getting the top / left offsets applied correctly. Here's what I added:
import { FixedSizeGrid } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

I double checked my code and don't think it's a bug on my end. I even tried changing the anchorSelect to use unique ids but that didn't help.

Version of Package
5.26.4

To Reproduce
import { FixedSizeGrid } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
Then implement an AutoSizer followed by a child FixedSizeGrid with divs that have a tooltip.

Expected behavior
Tooltip should show up right above the elements, not in the top left corner.

[gabrieljablonski]

@pickhardt

Hopefully you didn't click any links, spam bots now even on GitHub...

Opened the issue to clean it up, I'll try to get to your question later.

[pickhardt]

No worries, I didn't click the link. I will investigate more myself tomorrow too. I think it isn't a bug on my end. Still, I want to try some things, try more workarounds, see if I can figure it out.

[gabrieljablonski]

Sorry for the delay.

Can you try using a react portal to render the tooltip?

As explained on this comment on #1163

Here's the sample code:

https://stackblitz.com/edit/stackblitz-starters-t2j9yh?file=src%2FApp.tsx

---

If that doesn't help, can you try to provide a sample project reproducing the problem? It would help a lot in debugging the issue.

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.