Custom tooltip for every column in ag grid. I was trying to pass certain values in tooltip according to column in ag grid

Dash Python
1 
var dagcomponentfunc = window.dashAgGridComponentFunction = window.dashAgGridComponentFunction || {};


dagcomponentfuncs.CustomTooltip = function (props) {
    info = []
    if (props.data){
        if (props.value == 'measure')
            info = [
                React.createElement('div', {}, props.data.measure)
            ];
        else if (props.value == 'initiative')
            info = [
                React.createElement('div', {}, props.data.initiative)
            ];
    }
  
    return React.createElement(
        'div',
        {
            style: {
                border: '0pt',
                backgroundColor: props.color || 'grey',
                padding: 10,
            },
        },
        info
    );
};
1 Like
2

Hello @Vaishali,

I’m not sure what isn’t working, the value would determine the info.

You could use params.column.colId and check the field matches. I think it would exist in this params data set.

1 Like
3

Hi @Vaishali,
Yes, agree with @jinnyzor :smile:

props.value gets you the value of the cell you are hovering not the column name.

props.column.colId should works as you are trying to compare to ‘measure’/‘initiative’ which seem to be the field names, thus colId should be the same (if you didn’t set a customcolId in columnDefs)

Or you can use the headers if you set headerName which you can access with props.colDef.headerName

4

You can also pass a different tooltipComponent to each columnDef:

js code where they handle this

{
          headerName: 'Athlete Col 1',
          field: 'athlete',
          minWidth: 150,
          tooltipField: 'athlete',
        },
        {
          headerName: 'Athlete Col 2',
          field: 'athlete',
          minWidth: 150,
          tooltipComponent: CustomTooltip,
          tooltipValueGetter: toolTipValueGetter,
        },
5

What was your final Solution?

I have been trying to apply:

if (props.colDef.headerName == ‘Stock Ticker’)
info = [
React.createElement(‘h4’, {}, props.data.ticker),
React.createElement(‘div’, {}, props.data.company),
React.createElement(‘div’, {}, props.data.price),
];
else if (props.colDef.headerName == ‘Company’)
info = [
React.createElement(‘h5’, {}, props.data.company),
React.createElement(‘div’, {}, props.data.ticker),
React.createElement(‘div’, {}, props.data.price),

but it doesn’t seem to work

6

Hello @Mr.King,

I’d use props.column.colId instead, that way it will match what your rowData column.

Also, make sure you are wrapping your returns like this:

if (props.column.colId == 'ticker') {
info = [
React.createElement(‘h4’, {}, props.data.ticker),
React.createElement(‘div’, {}, props.data.company),
React.createElement(‘div’, {}, props.data.price),
];
}
else if (props.column.colId == 'company') {
info = [
React.createElement(‘h5’, {}, props.data.company),
React.createElement(‘div’, {}, props.data.ticker),
React.createElement(‘div’, {}, props.data.price),
]
}
7

I finally got it to work.
FYI in your code at the top, there is an ‘s’ missing from the end of the first line.
Don’t ask how long it took me to figure that out.

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.CustomTooltip = function (props) {
info =
console.log(props)
if (props.data){
if (props.colDef.headerName == ‘Stock Ticker’)
info = [
React.createElement(‘h4’, {}, props.data.ticker),
React.createElement(‘div’, {}, props.data.company),
React.createElement(‘div’, {}, props.data.price),
];
else if (props.colDef.headerName == ‘Company’)
info = [
React.createElement(‘h5’, {}, props.data.company),
React.createElement(‘div’, {}, props.data.ticker),
React.createElement(‘div’, {}, props.data.price),
];
}

return React.createElement(
    'div',
    {
        style: {
            border: '2pt solid white',
            backgroundColor: props.color || 'grey',
            padding: 10,
        },
    },
    info
);

};

with the scipt:

data = {
“ticker”: [“AAPL”, “MSFT”, “AMZN”, “GOOGL”],
“company”: [“Apple”, “Microsoft”, “Amazon”, “Alphabet”],
“price”: [154.99, 268.65, 100.47, 96.75],
}
df = pd.DataFrame(data)

columnDefs = [
{
“headerName”: “Stock Ticker”,
“field”: “ticker”,
“tooltipField”: ‘ticker’,
“tooltipComponentParams”: { “color”: ‘#d8f0d3’ },

},
{
    "headerName": "Company",
    "field": "company",
    "tooltipField": 'company',
    "tooltipComponentParams": { "color": '#d8f0d3' },
},
{
    "headerName": "Last Close Price",
    "field": "price",
    "valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
    "editable": True,
},

]

grid = dag.AgGrid(
id=“tooltip-simple-example”,
columnDefs=columnDefs,
rowData=df.to_dict(“records”),
columnSize=“sizeToFit”,
defaultColDef={“editable”: False, “tooltipComponent”: “CustomTooltip”},
dashGridOptions={“tooltipShowDelay”: 100}
)

3 Likes