title: Cannot customize ag-Grid custom tooltip with tooltip component
body: <p>I need to implement a customized tooltip for ag-Grid in angular 6.
  Following is my code :</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MyTooltipComponent } from '../my-tooltip/my-tooltip.component';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  
  export class AppComponent implements OnInit {
  
    private frameworkComponents = {};
  
    constructor() {
      this.frameworkComponents = { myTooltipComponent: MyTooltipComponent };
    }
  
    aggridConfig0: any = {
        rowData: [],
        columnDefs: [],
        defaultColDef: {
          filter: true,
          sortable: true,
          resizable: false,
          editable: false,
          enableRowGroup: false,
          tooltipComponent: "myTooltipComponent"
        },
        cubeXCreateAgGridColumn: (data) =&gt; {
          let temp = [];
          data.forEach((val, key) =&gt; {
              if (key == 0) {
                Object.keys(val).forEach((name) =&gt; {
                    temp.push({
                      headerName: name,
                      field: name,
                      tooltipField: tooltipName
                    })
                })
              }
          });
          return temp;
        }
    }
  
    private gridApi0;
    private gridColumnApi0;
    agGrid;
    onGridReady0(params) {
      this.agGrid = [
        {
          "header1": "abc",
          "header2": "efg"
        },
        {
          "header1": "def",
          "header2": "xyz"
        }
      ];
      this.gridApi0 = params.api;
      this.gridColumnApi0 = params.columnApi;
      this.aggridConfig0.rowData = this.agGrid;
      this.gridApi0.setColumnDefs(this.aggridConfig0.cubeXCreateAgGridColumn(this.aggridConfig0.rowData));
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;ag-grid-angular class="ag-theme-balham base-padding" style="height: 500px" 
                                    [rowData]="aggridConfig0.rowData" 
                                    [columnDefs]="aggridConfig0.columnDefs" 
                                    [defaultColDef]="aggridConfig0.defaultColDef" 
                                    [animateRows]="true" 
                                    [suppressDragLeaveHidesColumns]="true" 
                                    (gridReady)="onGridReady0($event)"
                                    [frameworkComponents]="frameworkComponents"&gt;
  &lt;/ag-grid-angular&gt;
  </code></pre>
  
  <p>my-tooltip-component.ts</p>
  
  <pre><code>import {Component, ViewEncapsulation} from '@angular/core';
  import {ITooltipAngularComp} from "@ag-grid-community/angular";
  
  @Component({
    selector: 'my-tooltip-component',
    template: `
        &lt;div class="custom-tooltip"&gt;
            &lt;p&gt;&lt;span&gt;Header 1 : {{data.header1}}&lt;/span&gt;&lt;/p&gt;
            &lt;p&gt;&lt;span&gt;Header 2 : {{data.header2}}&lt;/span&gt;&lt;/p&gt;
        &lt;/div&gt;`,
    styles: [
        `
            :host {
                position: absolute;
                width: 150px;
                height: 70px;
                border: 1px solid cornflowerblue;
                overflow: hidden;
                pointer-events: none;
                transition: opacity 1s;
            }
  
            :host.ag-tooltip-hiding {
                opacity: 0;
            }
  
            .custom-tooltip p {
                margin: 5px;
                white-space: nowrap;
            }
  
            .custom-tooltip p:first-of-type {
                font-weight: bold;
            }
        `
    ]
  })
  export class MyTooltipComponent implements ITooltipAngularComp {
  
    private params: any;
    private data: any;
  
    agInit(params): void {
        this.params = params;
        console.log("params here not printing............",params)
        this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
        this.data.color = this.params.color || 'white';
    }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AgGridModule } from 'ag-grid-angular';
  import 'ag-grid-enterprise';
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing/app-routing.module';
  import { MyTooltipComponent } from './component/my-tooltip/my-tooltip.component';
  @NgModule({
  declarations: [
  AppComponent, MyTooltipComponent
  ],
  imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AppRoutingModule,
  AgGridModule.withComponents([MyTooltipComponent])
  ],
  providers: [ ],
  bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Please find the stackblitz url here :
  <a href="https://stackblitz.com/edit/my-tooltip-app" rel="nofollow noreferrer">https://stackblitz.com/edit/my-tooltip-app</a></strong></p>
  
  <p>I am not able to show the customized data from my-tooltip.component.ts to the header1 column tooltip.
  I have referred - <a href="https://www.ag-grid.com/javascript-grid-tooltip-component/" rel="nofollow noreferrer">https://www.ag-grid.com/javascript-grid-tooltip-component/</a></p>
  
  <p>Please help me out. Thanks in advance</p>