React-tooltip: Use react-tooltip with react-virtualized multi grid

[fmlharrison]

Hey guys,

Dose anyone know how to use this great library with react virtualized multi-grid?

I want to be able to hover over the cells of my grid and show some extra info about that cell in the form of a pop up.

I am stumped!

Here is more or less what I am currently doing....

cellRenderer(data) {
    <span data-tip data-for='global'>{data}</span>
}

render() {
        return (
            <div id="AutoSizerWrapper" style={style.flexToFillAllTheSpace}>
                <AutoSizer>
                    {({ width, height }) => (
                        <MultiGrid
                          ref={ref => this.setGridRef(ref)}
                          fixedColumnCount={fixedColumnCount}
                          fixedRowCount={fixedRowCount}
                          cellRenderer={this.cellRenderer}
                          columnWidth={this.setColumnWidth}
                          columnCount={tableContents.columnCount}
                          height={height}
                          overscanRowCount={overscanRowCount}
                          rowHeight={this.setRowHeight}
                          rowCount={this.state.list.length}
                          styleBottomLeftGrid={style.bottomLeftGrid}
                          styleTopLeftGrid={style.topLeftGrid}
                          styleTopRightGrid={style.topRightGrid}
                          width={width}
                        />
                    )}
                </AutoSizer>
                <ReactToolTip id="global" aria-haspopup='true' effect="solid">
                    <span>This is a hover message</span>
                </ReactToolTip >
            </div>
        );
    }

What am I doing wrong?

[jakepens71]

The only way I was able to get it to work with a react bootstrap table we have is to create a customer component (in this case ToolTip):

const  ToolTipComponent = React.createClass({
    propTypes: {
        "displayValue": React.PropTypes.string.isRequired,
        "toolTip": React.PropTypes.string.isRequired,
    },

    render() {
        var id = _.uniqueId('ReactToolTip');

         return (
            <div>
                <ReactTooltip id={id} place="bottom" type="light"/>
                <p data-tip={this.props.toolTip} data-for={id} data-html={true} data-effect="solid" data-class="WorkIdCustomeToolTip" data-offset="{'top': 10, 'right': 130}">{this.props.displayValue}</p>
            </div>
        );
    }
});
export default ToolTipComponent;

and then pass it in like this in my cell render with the data:

{ <ToolTip displayValue={workId2} toolTip={workId2ToolTipStr} > </ToolTip> }

I had a hard time getting the ReactTooltip to work globally with only one ReactTooltip component on the highest component. This is the only way it seemed to work with the id for each cell. I would be interested in hearing if there is a better solution.

[fmlharrison]

Hi @jakepens71,
I also did what you were saying - I made a component that we specifically for a tool tip cell, that seemed to work but unfortunately the react virtualised library makes it hard to use react toll tip as it constantly re-renders cells as you scroll through the table so the toll tip is always out of position.
In the end I decided to use a different library to do what I wanted.

Thanks anyway.

[rszewczyk]

I think what is going on has to do with how react-tooltip wires up the listeners to its targets. I believe, based on this section, that since the virtual rows are being swapped in and out of the DOM, that react-tooltip does not know about them - because they weren't present when it queried the DOM for them. I was able to get it to work in a virtualized table by calling ReactTooltip.rebuild() in the onRowsRendered callback of the table. Since that globally registers all tooltips, it may not be suitable for all use cases, and I'm not sure what the performance implications are. But for the moment at least, it's what I'm doing.

[rakshitshetty]

@fmlharrison I am facing the exact same issue. Which library did you go about using to fix this?

[cuttlas]

I got it working by calling .rebuild() on the onSectionRenderer of the Grid:

<Multigrid onSectionRendered={() => {
     ReactTooltip.rebuild();
  }}/>

[GCobo]

@fmlharrison did you found a solution¿?

[tdzienniak]

I know the issue is old, but you can use bodyMode to make it work with virtualized components:

<ReactTooltip place="top" type="dark" effect="float" bodyMode />