How can I use Ag-grid property tooltipField?

Question

I am stuck when I using ag-grid with tooltipField property. I want to implement tooltip within ag-grid each row.

code is below. this code doesn't work.

{
  headerName: 'vital',
  field: 'indicator',
  tooltipField: 'indicator',
  cellRenderer: (p: any) => {
    return '<div align="center"><button class="btn btn-sm btn-primary" tooltip="'
      + this.translateService.instant(p.value)
      + '"></button></div>';
  }
}

Answer 1

I know is too late for answer OP but I deal with this and maybe could be useful for anyone watching up something similar.

In ag-grid we have many functions to different goals and we take in mind that before implement our solution.

In the OP case I can see data manipulation in cellRenderer function. This ain't the propose of this function. For this work you should use valueGetter, here you could do your magic to get the value related to this cell.

Then if this value need some formatting you shouldn't do this on valueGetter for this propose you have the valueFormatter function.

(image from ag-grid doc)

When the cellRender function is fired you have already the value and valueFormated so yo should only take care about how do you want to show this in the UI instead of trying to get/format value.

Some general pseudo code:

//Column
{
    headerName: 'Header Name',
    field: 'data.PropValue',
    tooltipField: 'data.PropValue',//This override 'tooltip' function implementation
    valueGetter: function (params) {//Only needed if you need to do some complex to get the value, i.e: data.Name + ' ' + data.Surename
        return params.data.PropValue + ' ' + params.data.PropValue1;
    },
    valueFormatter: function (params) {//Only needed if you need to do some custom parsing before show value in the UI, i.e: '$' + params.value
        return params.value;
    },
    cellRenderer: function (params) {//Only needed if you need some custom html control or something else

        return '<div ><button class="btn btn-sm btn-primary">' + params.valueFormatted +'"</button></div>';
    },
    tooltip: function (params) {//This will show valueFormatted if is present, if no just show the value.
        return (params.valueFormatted ? params.valueFormatted : params.value);
    }
}

Pseudo code regarding OP question:

//Column
{
    headerName: 'vital',
    field: 'indicator',                        
    valueGetter: (p: any) => {
        return this.translateService.instant(p.value);
    },
    cellRenderer: (p: any) => {
        return '<div align="center"><button class="btn btn-sm btn-primary">' + p.value + '</button></div>';
    },
    tooltip: (p: any) => {
        return p.value;
    }
}

Documentation links:

https://www.ag-grid.com/javascript-grid-value-getters/

https://www.ag-grid.com/javascript-grid-column-properties/#columns-only

Answer 2

This code worked for me in Angular 6.

 this.columnDefs = [
    {
        headerName: "Amount",
        field: "amount",
        valueFormatter: currencyFormatter,
        tooltip: function (params) {
            return (params.valueFormatted);
        },
    }
];

function currencyFormatter(params) {
  return "$ " + (params.value);
}

Answer 3

 this.columnDefs = [
   {
      headerName: 'Amount', field: 'amount',
      cellRenderer: params => {
        return this.currencyFormatter(params);
      },
      tooltipValueGetter: params => {
        return this.currencyFormatter(params);
      },
    }
]

currencyFormatter(params) {
     return "$ " + (params.value);
  }

Answer 4

First of all set enableBrowserTooltips={true} in gridOptions

const gridOptions = {
  defaultColDef: {
    editable: true,
    sortable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
    resizable: true,
  },
  enableBrowserTooltips: true,
  rowData: {data},
  columnDefs: {columns},
};

Then Add tooltipField in your column defination.If you want to show value of each cell in tooltip then you should pass field to tooltipField. That is why I set tooltipField = 'name'.This will render cell value in tooltip.

const columns = [
{
  field: "name",
  headerName: "First Name",
  tooltipField: 'name'
  minWidth: 100,
}]

But in my case I wanted to show tooltip on an icon with custom text, also my column was custom so there were no field value from backend.So I used tooltipValueGetter.

{
  field: "Action", //this is custom column which renders icon on every row
  cellRendererFramework: (param: IActionColumn) => (
    <Link to={SOME_ROUTE}>
      <FaRegChartBar /> //icon
    </Link>
  ),
  tooltipValueGetter: () => "My Custom Text",
  sortable: false,
  minWidth: 100,
}

Hope this helps you! ;)