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

admin管理员组

文章数量:1310297

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

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 ponent 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 ponent has also been added to my entry and declaration modules.

<<<----   ponent 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 ponent .ts ------->>>

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

@Component({
  selector: 'app-custom-tooltip',
  templateUrl: './custom-tooltipponent.html',
  styleUrls: ['./custom-tooltipponent.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 ponent .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

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

https://stackblitz./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 ponent 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 ponent has also been added to my entry and declaration modules.

<<<----   ponent 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 ponent .ts ------->>>

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

@Component({
  selector: 'app-custom-tooltip',
  templateUrl: './custom-tooltip.ponent.html',
  styleUrls: ['./custom-tooltip.ponent.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 ponent .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

• javascript
• angular
• typescript
• ag-grid-angular

Share Improve this question Follow edited Aug 29, 2019 at 21:43 Matthewz asked Aug 28, 2019 at 19:33 MatthewzMatthewz 8111 gold badge11 silver badge77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 ponent. Including line breaks being passed as a string array. Thanks for all the help!

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

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.ponent.html then you should see the data e 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.

本文标签： javascripthow to make a custom tooltip component for aggrid using material tooltipStack Overflow