title: how to make a custom tooltip component for ag-grid using material tooltip
body: <p>The current angular ag-grid tooltip example is not working.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko</a></p>
  
  <p>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.</p>
  
  <pre><code>&lt;&lt;&lt;----   component that wants the tooltip ---&gt;
  
  this.gridOptions = {
        deltaRowDataMode: true,
        getRowNodeId: (data) =&gt; data.name,
        onRowDoubleClicked: (data) =&gt; this.selectRow(data),
        rowSelection: 'single',
        defaultColDef: {
          sortable: true,
          resizable: true,
          tooltipComponentFramework: CustomTooltipComponent,
          tooltipValueGetter: (params: ITooltipParams) =&gt; params.data,
        }
      };```
  
        this.columnDefs = [
          {
            headerName: 'Name',
            field: 'name',
            sort: 'asc',
           // tooltipField: 'name'
          }
  
  
  
  &lt;&lt;&lt;-------- tooltip component .ts -------&gt;&gt;&gt;
  
  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;
    }
  
  }
  
  &lt;&lt;&lt;----------- tooltip component .html ----&gt;&gt;&gt;
  
  &lt;span matTooltip="{{data.name}}"&gt;&lt;/span&gt;
  
  &lt;div&gt;
  &lt;p&gt;&lt;span&gt;Name: &lt;/span&gt;{{data.name}}&lt;/p&gt;
  &lt;p&gt;&lt;span&gt;Created by: &lt;/span&gt;{{data.createdBy}}&lt;/p&gt;
  &lt;p&gt;&lt;span&gt;Modified by: &lt;/span&gt;{{data.modifiedBy}}&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>expected a tooltip to display in mat-tooltip format
  expected the toolTipParams: () to work with this approach</p>