7

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>';
  }
}
1
  • I could set the tooltipField using a record from the rowdata and also tried your cellrenderer and it all worked. Perhaps you could indicate which version or perhaps create a simple github version so people could have a better chance to work out why it is not working.
    – Matrim
    Aug 31, 2016 at 15:13

5 Answers 5

14

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) enter image description here

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

2
6

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);
}
3
  • Nice.! Worked for me. I am using cellRendererFramework for rendering some columns. In the html part of the cellRendereFramework i am using pipe to show data inside the object. Can there be any better solution?
    – Renil Babu
    Sep 18, 2018 at 6:57
  • how do you access a different column data to show in tool tip for above? May 29, 2020 at 1:32
  • 1
    it saying that 'tooltip' does not exist in type 'ColDef' Jan 18, 2022 at 16:03
1
 this.columnDefs = [
   {
      headerName: 'Amount', field: 'amount',
      cellRenderer: params => {
        return this.currencyFormatter(params);
      },
      tooltipValueGetter: params => {
        return this.currencyFormatter(params);
      },
    }
]

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

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! ;)

-1
  // setting up the cell render function for every Column

   $scope.columnsHeaders[i].cellRenderer = function(params) {
         if(params.value != null) {
                return '<span title="'+params.value+'">'+params.value+'</span>';
         }else {return null;}
   }

// this logic will not work for nested JSON soo you can do it like that
// here you are setting toolTipField property of your columns and initialised its value by column data

$scope.columns[i].tooltipField = $scope.columns[i].field;
1
  • 2
    How can I use the tooltipField when I have a valueGetter and not a field as tooltip? Adding this question here since I feel it is relevant here.
    – Abhi
    Feb 12, 2017 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.