Tooltip with AgGrid

Custom Components streamlit-aggrid
1

I have reviewed a few posts to have a tooltip show the information when hovering over a cell data, but those didn’t seemed to address my needs.

I managed to put something together (without really understanding the code but hey it works) that is able to show the tooltip when hovering over a specified cell of a column. In this case, the tooltip will have a black background, with white font text, and that the column header that I want the tooltip to show when hover is the “Review” column in the table.

gb.configure_column(field="Review", maxWidth=400, tooltipField="Review", tooltipComponent = JsCode("""
                                                            class CustomTooltip {
                                                                eGui;
                                                                init(params) {
                                                                    const eGui = (this.eGui = document.createElement('div'));
                                                                    const color = params.color || 'black';
                                                                    const data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
                                                                    eGui.classList.add('custom-tooltip');
                                                                    //@ts-ignore
                                                                    eGui.style['background-color'] = color;
                                                                    eGui.style['color'] = 'white';     
                                                                    eGui.style['padding'] = "5px 5px 5px 5px";  
                                                                    eGui.style['font-size'] = "15px";                                         
                                                                    eGui.style['border-style'] = 'double';                                                             
                                                                    this.eGui.innerText = data.Review;
                                                                }
                                                                getGui() {
                                                                    return this.eGui;
                                                                }
                                                                }"""))

An example of how it looks like:

image
image1302×477 70.6 KB

Am using streamlit==1.27.2 and streamlit-aggrid==0.3.4.post3

Hope it helps anyone who might be looking to implement something similar.

1 Like
2

Hi @andyphuawc114

Thanks for posting this! I am trying to achieve something similar. I tried replicating your example:

d = {'Review': ["Good", "Bad", "Average"], 'Name': [2, 22, 23]}
df = pd.DataFrame(d)
df.columns = ["Review", "Name"]

builder = GridOptionsBuilder.from_dataframe(df)
builder.configure_column(field="Review", maxWidth=400, tooltipField="Review", tooltipComponent = JsCode("""
                                                            class CustomTooltip {
                                                                eGui;
                                                                init(params) {
                                                                    const eGui = (this.eGui = document.createElement('div'));
                                                                    const color = params.color || 'black';
                                                                    const data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
                                                                    eGui.classList.add('custom-tooltip');
                                                                    //@ts-ignore
                                                                    eGui.style['background-color'] = color;
                                                                    eGui.style['color'] = 'white';     
                                                                    eGui.style['padding'] = "5px 5px 5px 5px";  
                                                                    eGui.style['font-size'] = "15px";                                         
                                                                    eGui.style['border-style'] = 'double';                                                             
                                                                    this.eGui.innerText = data.Review;
                                                                }
                                                                getGui() {
                                                                    return this.eGui;
                                                                }
                                                                }"""))
options = builder.build()
AgGrid(df, grid_options=options, allow_unsafe_jscode=True)

But I did not manage to get the tooltip working.

image
image814×233 5.7 KB

I guess you are basing yourself based on this? Do you have any pointers on how to get it to work? I am using the same versions of the packages you have mentioned

3

Hi @PhilippeMoussalli, try using this:

AgGrid(df, gridOptions=options, allow_unsafe_jscode=True)

The key is to use gridOptions and not grid_options.

4

Thanks @andyphuawc114. Indeed that seems to do it!