Trouble anchoring a tooltip to item in cellRenderer - reactjs

Question

I’m trying to use the AgGrid framework with a cellRenderer to render a div within a table and attach a tooltip to this div. The function that will render the tooltip that I’m using, showMyTooltip, expects an HTML element as an anchor. It works when attaching to other components, but for some reason doesn’t work when I try to attach to my cellRenderer. Here’s the cellRenderer component. When I log the value of this.anchor, I get “undefined.” Can anyone spot what I might be missing?
export class MyCellRenderer extends Component {
render() {
const { showTooltip, shouldOpenTooltip, tooltipContent } = this.props.value;
return
(<div>
<div ref={(el) => { this.anchor = el; }}>
<div> SHOULD ANCHOR TO THIS </div>
</div>
{shouldOpenTooltip &&
showMyTooltip({
anchor: this.anchor,
children: tooltipContent,
})
}
</div>);
}
}
export default MyCellRenderer;

Answer 1

I guess the cell renderer by default renders as a string. Below is an example for cell renderer using angular, maybe this will guide you for reactjs? In below example I have created a custom cell renderer and has assigned the name of the renderer in col def of ag-grid.
import { Component } from "#angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular";
#Component({
selector: 'tooltip-cell',
template: `<ng-template #popTemplate>
<div class="tooltip-renderer">
Created By: {{creator}} <br/>
Created On: {{crDateTime | date:'short'}} <br/>
Revised By: {{revisor}} <br/>
Revised On: {{revDateTime | date:'short'}} <br/>
</div>
</ng-template>
<span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })
export class ToolTipRenderer implements ICellRendererAngularComp {
public params: any;
public creator: any;
public crDateTime: any;
public revisor: any;
public revDateTime: any;
agInit(params: any): void {
this.params = params;
this.creator = params.data["Creator"];
this.crDateTime = params.data["CrDate"];
this.revisor = params.data["Revisor"];
this.revDateTime = params.data["RevDate"];
}
refresh(): boolean {
return false;
}
}
var colDef1 = {
cellRenderer: "tooltipRenderer",
...
}