how to make a custom tooltip component for ag-grid using material tooltip

Question

The current angular ag-grid tooltip example is not working.

https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko

Javascript/typescript. Running Angular 8 and newest ag-grid release. I have tried to follow the plunker example to a T and have had no luck. I am now trying this. I have a component called CustomTooltipComponent that has a dynamic mat-tooltip in the template that is taking in {{data}} from my .ts file. The tooltip doesnt show so i put in a span and it shows, but it shows in plain text. The created component has also been added to my entry and declaration modules.

<<<----   component that wants the tooltip --->

this.gridOptions = {
      deltaRowDataMode: true,
      getRowNodeId: (data) => data.name,
      onRowDoubleClicked: (data) => this.selectRow(data),
      rowSelection: 'single',
      defaultColDef: {
        sortable: true,
        resizable: true,
        tooltipComponentFramework: CustomTooltipComponent,
        tooltipValueGetter: (params: ITooltipParams) => params.data,
      }
    };```

      this.columnDefs = [
        {
          headerName: 'Name',
          field: 'name',
          sort: 'asc',
         // tooltipField: 'name'
        }



<<<-------- tooltip component .ts ------->>>

import { Component } from '@angular/core';
import { ITooltipAngularComp } from 'ag-grid-angular';
import { ITooltipParams } from 'ag-grid-community';

@Component({
  selector: 'app-custom-tooltip',
  templateUrl: './custom-tooltip.component.html',
  styleUrls: ['./custom-tooltip.component.scss'],
})
export class CustomTooltipComponent implements ITooltipAngularComp {

  public params: ITooltipParams;
  public data: any;

  constructor() { }

  agInit(params: ITooltipParams): void {
    this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
  }

}

<<<----------- tooltip component .html ---->>>

<span matTooltip="{{data.name}}"></span>

<div>
<p><span>Name: </span>{{data.name}}</p>
<p><span>Created by: </span>{{data.createdBy}}</p>
<p><span>Modified by: </span>{{data.modifiedBy}}</p>

</div>

expected a tooltip to display in mat-tooltip format expected the toolTipParams: () to work with this approach

Answer 1

It's not perfect but I was able to get it to work while using the cellRendererFramework as mentioned by @adrian above. Here is a working example of my fix to be able to use a [matTooltip] with all of its features in an angular ag-grid custom component. Including line breaks being passed as a string array. Thanks for all the help!

https://stackblitz.com/edit/angular-ag-grid-tooltip-example-ywzxle