How to add tooltip on aggrid row?

[tz301]

Question

From https://ag-grid.com/javascript-data-grid/tooltips/ , I can set tooltip using headerTooltip on column header.
But using tooltipValueGetter to set cell tooltip seems not working.

ui.aggrid(
    {
        'columnDefs': [{'field': 'name', 'headerName': 'Name', 'headerTooltip': 'Tooltip for Column Header'}],
        'rowData': [{'name': 'Alice'}, {'name': 'Bob'}],
    }
)

[falkoschindler]

Hi @tz301,

The "tooltipValueGetter" field needs to be a function. We can't instantiate JavaScript functions in Python, but we can send the function as a string. To indicate that the string needs to be converted back to a JavaScript instance, we use a colon ":" prefix:

ui.aggrid({
    'columnDefs': [{
        'field': 'name',
        'headerName': 'Name',
        'headerTooltip': 'Tooltip for Column Header',
        ':tooltipValueGetter': '(params) => params.value.toUpperCase()',
    }],
    'rowData': [
        {'name': 'Alice'},
        {'name': 'Bob'},
    ],
})

[tz301]

@falkoschindler That works!

But if I want the tooltip to be selected from a dict, such as below the tooltip for 'Alice' is 'a', how can I write this?

name_mapping = {'Alice': 'a', 'Bob': 'b'}
':tooltipValueGetter': '(params) => name_mapping[params.value]',  # how to set this function?

[falkoschindler]

I'd recommend serializing and string-interpolating the name_mapping like this:

name_mapping = {'Alice': 'a', 'Bob': 'b'}

ui.aggrid({
    'columnDefs': [{
        'field': 'name',
        'headerName': 'Name',
        'headerTooltip': 'Tooltip for Column Header',
        ':tooltipValueGetter': f'(params) => ({json.dumps(name_mapping)})[params.value]',
    }],
    'rowData': [
        {'name': 'Alice'},
        {'name': 'Bob'},
    ],
})

[tz301]

Thanks!