How to create tooltip on ag-grid row?

14
votes

I want to display a tooltip conditionally based on status field, on hovering over an entire row(not on just cells). In the API documentation, I found this: https://www.ag-grid.com/javascript-grid-column-properties/

tooltip A callback that takes (value, valueFormatted, data, node , colDef, rowIndex, and api) It must return the string used as a tooltip. tooltipField takes precedence.

Can this be used to display a tooltip on an entire row? If yes, could anyone provide any working example? If not, is there any other way I can achieve it?

Thanks

3
ag-gridag-grid-ng2
why just not have the same tooltip for each cell (in row perspective)? - un.spike
@un.spike Thanks for the suggestion but, My grid has 20+ columns. It would be a lot of duplicate code. - Sandeep Kumar
just one same part of cell-tooltip handler - un.spike

3 Answers

19
votes

I use them like this in column definition:

{
    field: 'fullAddress',
    headerName: 'Address',
    tooltip: (params) => 'Address: ' + params.value
}
7
votes

I found something like this:

gridOptions.defaultColDef = {
    tooltip: (params) => {
        if (condition2) {
            return "Some txt";
        } else if (condition2) {
            return "Some txt2";
        } else {
            return "Some txt3";
        }
    }
};

It will add this tooltip as default columns definitions so you dont need to copy it in every column definition.

-> link to documentation: https://www.ag-grid.com/javascript-grid-cell-editing/

4
votes

As of v20.1, colDef.tooltip has been deprecated. You can now set a tooltip on each column by doing the following:

{
    field: 'ItemDescription',
    headerName: 'Description',
    tooltipField: 'ItemDescription'
}

You can see the documentation here.