как сделать настраиваемый компонент всплывающей подсказки для ag-grid с помощью всплывающей подсказки материала

Текущий пример всплывающей подсказки угловой сетки не работает.

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

Javascript / машинописный текст. Запуск Angular 8 и новейшего выпуска ag-grid. Я пытался следовать примеру плункера до буквы Т, но мне не повезло. Я сейчас пробую это. У меня есть компонент CustomTooltipComponent, который имеет динамическую всплывающую подсказку в шаблоне, который принимает {{данные}} из моего файла .ts. Всплывающая подсказка не отображается, поэтому я ввел диапазон, и он отображается, но отображается в виде обычного текста. Созданный компонент также был добавлен в мои модули ввода и объявления.

<<<----   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>

ожидалось, что всплывающая подсказка будет отображаться в формате mat-tooltip; ожидалось, что toolTipParams: () будет работать с этим подходом