React-tooltip: Usage with react-virtualized

Created on 19 May 2017 · 6Comments · Source: wwayne/react-tooltip

Has anyone had any luck getting the position correct using a react-tooltip within a react-virtualized list?

It seems like the react-tooltip's can't get their position right and they get confused about their position within the virtualized list.

Source

sedouard

Most helpful comment

You have to place the tooltips outside of the virtualized area and have them be not virtualized. The way absolute positioning works within the virtualized area is pretty tough because you need to know how many items are rendered above an arbitrary point in the virtualized list.

So we build the tooltips first:

const tooltips = projects.map(({ id }) => <ReactTooltip id={id} key={id} effect="solid" />);

And then place them outside of the virtualized list:

render () {
  <List
    onScroll={
        _.throttle(() => {
        ReactTooltip.rebuild();
        ReactTooltip.hide();
        }, 200)
    }>
  </List>
  {tooltips}
}

sedouard on 31 May 2017

🎉2 👍2 ❤1 😄1

All 6 comments

Turns putting react-tooltip's within a react-virtualized List is really complicated. Best to bind react-tooltip's from outside of virtualized components.

sedouard on 24 May 2017

@sedouard What did you end up doing to fix this?

Typhon66 on 31 May 2017

So we build the tooltips first:

const tooltips = projects.map(({ id }) => <ReactTooltip id={id} key={id} effect="solid" />);

And then place them outside of the virtualized list:

render () {
  <List
    onScroll={
        _.throttle(() => {
        ReactTooltip.rebuild();
        ReactTooltip.hide();
        }, 200)
    }>
  </List>
  {tooltips}
}

sedouard on 31 May 2017

🎉2 👍2 ❤1 😄1

@sedouard I'm having the same issue, in my case it's Autosizer and Table. Do you have another example or a more simple example/ approach to this? In my case only IE11 does it correctly, FF and Chrome do not.

AO17 on 15 Jun 2018

👍1

For anyone still looking for a solution with AutoSizer + Table, I got this working performatively.

I found that rendering a Tooltip for each row as recommended had a dramatic effect on performance with more than a small number of rows, so I wanted to get it working by only rendering one. The important part is just calling the tooltip methods (note I used a trailing debounce instead of throttle just to make sure that the method is always called at the end of every burst of scroll events).

See a working example: https://codesandbox.io/s/r5393l62pm