Tooltip does not work when using unique IDs within a table component

I’m actually using ag-grid to render some html along with ReactTooltip in a cell of a table. I actually use React components to render each cell and within each react component, I embed an unique ReactTooltip. I actually want to hover a validation error if the cell has an error from user input.

In my render method, I have the following

return (
                <div>
                    <ReactTooltip id={uniqueID} type="error" effect="float" />
                       <div data-tip data-for={uniqueID} >
                               {cell.stringValue}
                    </div>
                </div>
            );

It’s weird, just for testing purposes I used a static and constant string for the id, the tool tip will render on the first render but after the cell is rerendered, the tooltip disappears.

Gif of ReactTooltips having the same ID:

Gif of me inspecting the cell and the html markup of the corresponding ReactToolTip

When do I use uniqueIDs for each ReactTooltip within a cell of a table, the tooltip simply does not show.

Gif of ReactTooltips having unique IDs with the same exact code, everything is the same exact uniqueID is different for each cell and each id of ReactToolTip

I’ve tried putting ReactTooltip.rebind() in my React Component’s componentDidUpdate() for each cell in hopes of tooltips being associated with the appropriate cell but to no avail.

Any input would be much appreciated.

[tuancaraballo]

I had a similar issue: I had a table of tasks and the tooltip wouldn’t show when clicking on the one of the edit buttons.

What I ended up doing was calling rebuild in componentDidMount

 componentDidMount() {
    this.setState({...someState I had to set first}, () => ReactTooltip.rebuild()
 }

I’m using reactTooltip’s getContent function to customize my tooltip:

Hope it helps

[oleksiivasylchenko]

I solved it using ReactTooltip.show and hide

<span className={style.mainBox} ref={(c) => { this.ref = c; }} 
      data-tip={`${item.name} ID`} data-for={id}
      onMouseOver={() => { ReactTooltip.show(this.ref); }}
      onMouseLeave={() => { ReactTooltip.hide(this.ref); }}
>
  {template}
  {isLastItem ? null: ', '}
  <ReactTooltip id={id} place="top" className="tooltip" type="light" />
</span>

Works fine for me with ag-grid cells now