CODEWITHSUNDEEP
javascriptangulartypescriptag-grid-angular
Matthewz
Matthewz

Reputation: 81

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

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

Upvotes: 5

Views: 18022

Answers (2)

Matthewz
Matthewz

Reputation: 81

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

Upvotes: 3

adrian
adrian

Reputation: 2923

In terms of the data issue, your StackBlitz is a bit of out sync with this question, but you need to ensure the properties on the data object have the same casing as the properties on the row data; if you change fname to fName and lname to lName in tool-tip.component.html then you should see the data come through correctly.

Regarding the material tooltip, the designed usage is that you have an element (e.g. a span) with a matTooltip attribute, and then when you hover over that element you will see a tooltip rendered using the contents of the attribute. However, the way you're using it here is to try to render an element with a material tooltip attached inside the tooltip that ag-Grid is rendering, which is why you're seeing plain text. If you do wish to bypass ag-Grid's tooltip rendering and use the material tooltip instead, then you might have more luck with a custom cell renderer.

Upvotes: 1

Related Questions