AG Grid Angular Custom Tool Tip does not work for two components

I am using the Angular Material Tab component along with AG Grid like below

<mat-tab-group>    <mat-tab label="First Tab">      <app-grid-component1></app-grid-component1> //First Component    </mat-tab>    <mat-tab label="Second Tab">       <app-grid-component2></app-grid-component2>    </mat-tab>  </mat-tab-group>  

I have created Tool tip component

 agInit(params: ToolTipParams): void {      this.params = params;      if (params.lineBreak === true) {        this.toolTip = params.toolTipArray.join('\n');      } else if (params.lineBreak === false) {        this.toolTip = params.toolTip;      } else {        this.toolTip = params.value;      }    }      refresh(params: ToolTipParams): boolean {      this.params = params;      return true;    }  

And my first component works fine and show the tooltip on every cell

  this.gridOptions = {        deltaRowDataMode: true,        rowSelection: 'single',        defaultColDef: {          sortable: true,          resizable: true,          // PLACE HERE TO EFFECT ALL COLUMNS          cellRendererFramework: ToolTipComponent,          cellRendererParams: (params: ICellRendererParams) => this.formatToolTip(params.data)        }      };  

But if I click and go to the Second tab with the same configuration as the first tab, the tooltip shows for the first two columns perfectly but does not show from 3rd column on hover...I can only see a little black box without the content but if I click the cells I can see the tooltip content. I did put the log and checked aginit function in tooltip component loads with data but the tooltip does not show any data on hover.

https://stackoverflow.com/questions/65866917/ag-grid-angular-custom-tool-tip-does-not-work-for-two-components January 24, 2021 at 11:37AM