# Dash ag-grid tooltip

**URL:** <https://community.plotly.com/t/dash-ag-grid-tooltip/77617>\
**Category:** Dash Python\
**Created:** [August 9, 2023, 10:19pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617 "2023-08-09T22:19:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 9, 2023, 10:19pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/1 "2023-08-09T22:19:07Z")

</div>

Hi, I’m trying to create custom tootip on the dash ag-grid column names with similar style as a dbc.Tooltip. Here is what I’ve tried following the example on this link [Tooltips | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/tooltips), however, the arrow is above the box (misaligned). Any help would be appreciated!

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

dagcomponentfuncs.CustomTooltip = function (props) {  
if (props.rowIndex === undefined) {  
return React.createElement(  
‘div’,  
{className: ‘fade show tooltip bs-tooltip-end’},  
React.createElement(‘div’,{className: ‘tooltip-arrow’}, ),  
React.createElement(‘div’,{className: ‘tooltip-inner’}, props.value)  
);}  
};

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 9, 2023, 11:12pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/2 "2023-08-09T23:12:40Z")

</div>

Hello @kcamlegin,

Welcome to the community!

Did you know, you can just use the dbc.tooltip?

In your code, where you create the react element, instead of “div”, put `window.dash_bootstrap_components.Tooltip`.

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 10, 2023, 10:02pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/3 "2023-08-10T22:02:11Z")

</div>

Thanks, I didn’t know that! I’ve now tried the following which shows the tooltip but not when I hover over the column name but appears at the side of the table (the ID of the datatable is datatable-interactivity). I’m not sure why?

dagcomponentfuncs.CustomTooltip = function (props) {  
if (props.rowIndex === undefined) {  
return React.createElement(  
window.dash\_bootstrap\_components.Tooltip,  
{target: ‘datatable-interactivity’},  
props.value)  
;}  
};

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 10, 2023, 10:07pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/4 "2023-08-10T22:07:42Z")

</div>

> [@kcamlegin](#):
>
> dagcomponentfuncs.CustomTooltip = function (props) {  
> if (props.rowIndex === undefined) {  
> return React.createElement(  
> window.dash\_bootstrap\_components.Tooltip,  
> {target: ‘datatable-interactivity’},  
> props.value)  
> ;}  
> };

I think this should be:

```auto
dagcomponentfuncs.CustomTooltip = function (props) {
if (props) {
    return React.createElement(
        window.dash_bootstrap_components.Tooltip,
        {},
        props.value)
    }
};

```

You shouldnt have to worry about the location, but maybe you do. XD

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 10, 2023, 10:17pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/5 "2023-08-10T22:17:47Z")

</div>

Thanks, unfortunately that’s the first thing I tried before putting a target in the curly brackets… And nothing shows up initially.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 10, 2023, 10:44pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/6 "2023-08-10T22:44:39Z")

</div>

Use console log on the params and see if there is an element in there that you can target.

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 11, 2023, 8:12pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/7 "2023-08-11T20:12:46Z")

</div>

Hi @jinnyzor, thanks but this is too complicated for me, I think I need to work around it.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 11, 2023, 8:14pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/8 "2023-08-11T20:14:27Z")

</div>

Can you give me an example app to work with, to see if I can get it working for you?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 11, 2023, 8:42pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/9 "2023-08-11T20:42:36Z")

</div>

Here, give this a shot:

js file:

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

dagcomponentfuncs.CustomTooltip = function (props) {
    info = [
        React.createElement('h4', {}, props.data.ticker),
        React.createElement('div', {}, props.data.company),
        React.createElement('div', {}, props.data.price),
    ];

    return React.createElement('div',{},[React.createElement(
        window.dash_bootstrap_components.Tooltip,
        {
            target: `ticker_${props.value}`,
            placement: 'bottom'
        },
        info
    ),
    React.createElement(
        "div",
        {
            id: `ticker_${props.value}`,
        },
        props.value
    )])
};

```

app.py:

```auto
import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
import dash_bootstrap_components as dbc

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",
        "cellRenderer": "CustomTooltip"

    },
    {
        "headerName": "Company",
        "field": "company",
    },
    {
        "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},
)

app = Dash( __name__ , external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [dcc.Markdown("Example of custom tooltip"), grid],
    style={"margin": 20},
)

if __name__ == " __main__":
    app.run(debug=True)

```

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 11, 2023, 9:38pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/10 "2023-08-11T21:38:05Z")

</div>

Thanks a lot man, it’s an ingenious solution creating an artificial div with id where the dbc Tooltip can target (from what I understand). I tried the following and while it shows the correct text under each column, the styling of the tooltip seems to be different from what I’d expect (dark background with white text, at the moment it’s just text with a transparent background).

dagcomponentfuncs.CustomTooltip = function (props) {  
if (props.rowIndex === undefined) {  
return React.createElement(  
‘div’,  
{},  
[React.createElement(  
window.dash\_bootstrap\_components.Tooltip,  
{target: 'ticker\_{props.value}',placement: 'top'}, props.value), React.createElement( "div", { id: `ticker\_{props.value}`,  
},  
props.value  
)])  
;}  
};

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 11, 2023, 9:40pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/11 "2023-08-11T21:40:53Z")

</div>

Nice example @jinnyzor

This one would be a good example for the dag-docs too. Just need to make sure the `id` and the `target` are using unique ids 🙂

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 11, 2023, 9:44pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/12 "2023-08-11T21:44:06Z")

</div>

Make sure you are importing the dbc stylesheet in the external\_stylesheets. 🙂

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 13, 2023, 9:36pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/13 "2023-08-13T21:36:03Z")

</div>

Hi @jinnyzor,

Sorry to bother you again, when I run your example app, the tooltip clearly works (with the right format etc.). However, when I modify your example app as follows, the tooltip is not showing the way it’s intended (and it is similiar to how it showed on my app). Would you have a look please?

**app.py**

```auto
import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
import dash_bootstrap_components as dbc

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",
        'headerTooltip': "This is stock ticket"

    },
    {
        "headerName": "Company",
        "field": "company",
        'headerTooltip': "This is Company name"
    },
    {
        "headerName": "Last Close Price",
        "field": "price",
        'headerTooltip': "This is last close 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",
    dashGridOptions = {'pagination':True,"tooltipShowDelay": 0},
    defaultColDef={"editable": False,"tooltipComponent": "CustomTooltip"},
)

app = Dash( __name__ , external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [dcc.Markdown("Example of custom tooltip"), grid],
    style={"margin": 20},
)

if __name__ == " __main__":
    app.run(debug=True)

```

**js file**

```auto

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

dagcomponentfuncs.CustomTooltip = function (props) {
    
    if (props.rowIndex === undefined) {
    return React.createElement('div',{},[React.createElement(
        window.dash_bootstrap_components.Tooltip,
        {
            target: `ticker_${props.value}`,
            placement: 'bottom'
        },
        props.value
    ),
    React.createElement(
        "div",
        {
            id: `ticker_${props.value}`,
        },
        props.value
    )])
};
};

```

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 13, 2023, 9:59pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/14 "2023-08-13T21:59:04Z")

</div>

Hello @kcamlegin,

The defaultColDef needs to have cellRenderer not tooltipComponent. What we made was the component that has a div and the tooltip targeting the div. 😁

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 13, 2023, 10:13pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/15 "2023-08-13T22:13:55Z")

</div>

Thanks @jinnyzor, I changed the tooltipComponent in defaultColDef to cellRenderer but it throws an error, then I tried changing the headerToolTip in Column def to cellRenderer too, but the tooltip didn’t show. Feeling a bit dumb, but would you mind to amend my code directly please?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 13, 2023, 10:35pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/16 "2023-08-13T22:35:01Z")

</div>

Sure, you need to adjust your tooltip component as such:

```auto
dagcomponentfuncs.CustomTooltip = function (props) {
    if (typeof props.rowIndex !== 'undefined') {
        return React.createElement('div',{},[React.createElement(
            window.dash_bootstrap_components.Tooltip,
            {
                target: `ticker_${props.value}`,
                placement: 'bottom'
            },
            props.value
        ),
        React.createElement(
            "div",
            {
                id: `ticker_${props.value}`,
            },
            props.value
        )])
    };
    return null;
};

```

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 14, 2023, 11:00pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/17 "2023-08-14T23:00:06Z")

</div>

Hi @jinnyzor , in your code you wrote props.rowIndex !== ‘undefined’ but I think I actually want props.rowIndex === ‘undefined’. Sorry if I misunderstood you but I’m targeting the header rather than the rows. For the rest of the js code, it’s very similar to the code I posted previously. The reason I include headertooltip initially, I was trying to mimic the example on this page [JavaScript Data Grid: Tooltip Component (ag-grid.com)](https://www.ag-grid.com/javascript-data-grid/component-tooltip/), under “Header Tooltip with Custom Tooltip”, but this is not in Dash and I fail to replicate it. Given that we’ve come so far, I’d really like to be able to solve this problem. Would you please help again? 🙏

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 14, 2023, 11:12pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/18 "2023-08-14T23:12:07Z")

</div>

You want the header to display the text that you are wanting?

That will not be with the tooltip… or the cellRenderer.

---

<div class="post-metadata">

**Author:** ![kcamlegin](https://avatars.discourse-cdn.com/v4/letter/k/bc8723/32.png) [@kcamlegin](https://community.plotly.com/u/kcamlegin)\
**Post date:** [August 15, 2023, 8:59pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/19 "2023-08-15T20:59:01Z")

</div>

Yes @jinnyzor, I’d like the header to display the text thanks.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 15, 2023, 9:51pm UTC](https://community.plotly.com/t/dash-ag-grid-tooltip/77617/20 "2023-08-15T21:51:36Z")

</div>

Here, try this:

```auto
dagcomponentfuncs.CustomTooltip = function (props) {
    if (typeof props.rowIndex === 'undefined') {
        return React.createElement('div',{},[React.createElement(
            window.dash_bootstrap_components.Tooltip,
            {
                target: `ticker_${props.value}`,
                placement: 'bottom',
                is_open: true,
            },
            props.value
        ),
        React.createElement(
            "div",
            {
                id: `ticker_${props.value}`,
                style: {height: '0px'}
            },
        )])
    };
    return null;
};

```

Still kinda glitchy, but seems to work. 😛

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/6/c673a452adcda3184a3f4f37da18ce33ae64075f.png)

[Next page](https://community.plotly.com/t/dash-ag-grid-tooltip/77617.md?page=2)