Using the tooltip component

Custom Components
1

I’m creating a screen for project management. For that, I’m trying to use the tooltip component of aggrid. In this case, there would be a table with the tasks and I would like that when I hover over a certain one, it will show a pop-up with some information about that task.

I tried to do what has been described here, I tried to make some adaptations but nothing worked

My code so far has been this, but so far nothing has worked, when I hover over one of the columns it only shows the name of that cell.

O código base que eu estou tentando está conforme abaixo:

gb = ag.GridOptionsBuilder.from_dataframe(df)
gridOptions = gb.build()
customTooltip = ag.JsCode(“”"class CustomTooltip {
init(params) {
this.eGui = document.createElement(‘div’);
this.color = ‘white’;
this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;

                this.eGui.classList.add('custom-tooltip');
                //@ts-ignore
                this.eGui.style['background-color'] = color;
                this.eGui.innerHTML = `
                        <p>
                            <span class"id">${this.data.task_id}</span>
                        </p>
                        <p>
                            <span>Name: </span>
                            ${this.data.task_name}
                        </p>
                    `;
            }

            getGui() {
                return this.eGui;
            }
            }""")
        gridOptions["tooltipShowDelay"] = 0
        gridOptions["tooltipHideDelay"] = 2000

        columnsDefs = list(map(lambda x: {"field": x}, columns))
        columnsDefs = [({"field": column["field"], "cellRenderer":self.set_checkbox()}) if column["field"] in list(
            df.select_dtypes("bool").columns) else ({"field": column["field"], "tooltipField": column["field"]}) for column in columnsDefs]
        gridOptions["columnDefs"] = columnsDefs
        gridOptions["tooltipComponent"] = customTooltip
2

Hi @Nauane_Linhares, see if this works for you:

Cheers

3

I was able to do what I wanted by putting the line that defines columnsdef like this:

 columnsDefs = [({"field": column["field"], "cellRenderer":self.set_checkbox()}) if column["field"] in list(
                df.select_dtypes("bool").columns) else ({"field": column["field"], "tooltipField": column["field"], "tooltipComponent": self.tooltip_component()}) for column in columnsDefs]

Where the tooltip_component function is as below:

def tooltip_component(self):
        tooltip = ag.JsCode("""class CustomTooltip {
                init(params) {
                    const eGui = (this.eGui = document.createElement('div'));
                    const color = params.color || 'white';
                    const data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;

                    eGui.classList.add('custom-tooltip');
                    //@ts-ignore
                    eGui.style['background-color'] = color;
                    eGui.innerHTML = `
                            <p>
                                <span class"name">${data.task_name}</span>
                            </p>
                            <p>
                                <span>Country: </span>
                                ${data.percent_work}
                            </p>
                            <p>
                                <span>Total: </span>
                                ${data.task_finish_date}
                            </p>
                        `;
                }

                getGui() {
                    return this.eGui;
                }
                }""")
        return tooltip

I wanted to know how I can set the style of the popup I want, would anyone know how?

4

Hi Nauane! I’m facing a problem similar as what you faced. In my case, I want to display a tooltip in the column header, if you see this message I want to ask you if you can send your code, and then I could compare to mine.