dashtable with pagination: tooltips appear in wrong place

Describe your context

packages

dash                              2.0.0
dash-auth                         1.4.1
dash-colorscales                  0.0.4
dash-daq                          0.5.0
dash-renderer                     1.9.1

It's frontend related:
- OS: MacOS 11 (Big Sur)
- Browser: Firefox
- Version 94.0.2

Describe the bug

When using dashtable pagination together with tooltips, then the tooltips only appear correctly on page one. On all other pages, the tooltip appears in the top left of the table (see screenshot).

This bug might be connected to row_index more generally. We found that style_data_conditional using row_index to specify the row of a table doesn't work on pages 2+ either.

Expected behavior

Tooltips should appear at the correct position.n all pages of a paginated dash-tables.

Screenshots

There is a pull request related to this issue in plotly/dash-table repo but it wasn't merged. Could it be copied to current repository?
plotly/dash-table#906

Looks like plotly/dash-table#906 has some open items but should be relatively straightforward to bring it over here and finish it - if anyone would like to give it a shot we'd be happy to help get it finished 😄

I also see this problem. The many first items in page 1 is working.
But when scrolling down, it gets more weird?

Hi can I have a crack at finishing this?

is there issue still there to fix it

Any progress on this topic? This creates a table that replicates the issue.
On page 2 of the paginated table, the tooltip positioning is wrong.

`import dash
import dash_table
from dash import html

data = [
{"ID": i, "Name": f"Item {i}", "Description": f"This is item {i}."}
for i in range(1, 11)
]

app = dash.Dash(name)

app.layout = html.Div([
dash_table.DataTable(
id="simple-table",
columns=[
{"name": "ID", "id": "ID"},
{"name": "Name", "id": "Name"},
{"name": "Description", "id": "Description"}
],
data=data, # All data
page_size=5, # Page size is 5
page_current=0, # Initial page is the first one
tooltip_data = [
{
'Description': {
'value': row['Description'],
'type': 'markdown'
}
} for row in data
],
tooltip_delay=0,
tooltip_duration=None,
),
])

if name == "main":
app.run_server(debug=False)`

For those seeking a quick workaround. It is possible to insert html into the dash cell content (and include the appropriate css). This can make a tooltip appear when hovering on the cell content. It works fine with paginated dash tables.

@nielsvth

@nielsvth I thought this was closed, @sakshamgumber if you'd like to have a crack at it, please go ahead, I'm working on the layout issue.

Since this was reported, DataTable has been deprecated and we recommend using Dash AG Grid

This example demonstrates that the tooltip is in the correct position on all pages when using Dash AG Grid.

More information on Tooltips in the dash docs:
https://dash.plotly.com/dash-ag-grid/tooltips

If you have questions about migrating to Dash AG Grid, please ask on the Plotly Community Forum.

import dash
import dash_ag_grid as dag
from dash import html

data = [
    {"ID": i, "Name": f"Item {i}", "Description": f"This is item {i}."}
    for i in range(1, 200)
]

app = dash.Dash()

app.layout = html.Div(
    [
        dag.AgGrid(
            id="simple-table",
            columnDefs=[
                {"field": "ID"},
                {"field": "Name" },
                {"field": "Description", "tooltipField": "Description"},
            ],
            rowData=data,

            dashGridOptions={
                "tooltipShowDelay": 0,
                "tooltipHideDelay": 100000,
                "pagination" :True,
            },
        ),
    ]
)

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

Navigation Menu

Repository navigation

dashtable with pagination: tooltips appear in wrong place #1848

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

dashtable with pagination: tooltips appear in wrong place #1848

Description

Activity

adlerberg0 commented on Feb 8, 2022

alexcjohnson commented on Feb 10, 2022

tlinnet commented on Feb 21, 2022

kenshima4 commented on Sep 13, 2023

sakshamgumber commented on Sep 17, 2024

nielsvth commented on Jan 6, 2025

nielsvth commented on Jan 7, 2025

kenshima4 commented on Jan 7, 2025

AnnMarieW commented on Sep 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions