search

ReactTooltip / react-tooltip

React Tooltip Component
https://react-tooltip.com/
MIT License
3.61k stars 527 forks source link

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

Open pickhardt opened 2 months ago

pickhardt commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

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.