Skip to content

dashtable with pagination: tooltips appear in wrong place #1848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HeinerTholen opened this issue Dec 1, 2021 · 8 comments
Open

dashtable with pagination: tooltips appear in wrong place #1848

HeinerTholen opened this issue Dec 1, 2021 · 8 comments
Labels
bug something broken dash-data-table related to DataTable component good first issue suitable for newcomers P3 backlog

Comments

@HeinerTholen
Copy link

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

dash-table-bug

@adlerberg0
Copy link

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

@chriddyp chriddyp added the good first issue suitable for newcomers label Feb 10, 2022
@alexcjohnson
Copy link
Collaborator

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 😄

@tlinnet
Copy link

tlinnet commented Feb 21, 2022

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

@T4rk1n T4rk1n added the dash-data-table related to DataTable component label Mar 13, 2023
@kenshima4
Copy link

Hi can I have a crack at finishing this?

@gvwilson gvwilson self-assigned this Jul 25, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson added P3 backlog bug something broken labels Aug 13, 2024
@gvwilson gvwilson changed the title [BUG] dashtable with pagination: tooltips appear in wrong place dashtable with pagination: tooltips appear in wrong place Aug 13, 2024
@sakshamgumber
Copy link

is there issue still there to fix it

@nielsvth
Copy link

nielsvth commented Jan 6, 2025

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)`

@nielsvth
Copy link

nielsvth commented Jan 7, 2025

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. Image

@kenshima4
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken dash-data-table related to DataTable component good first issue suitable for newcomers P3 backlog
Projects
None yet
Development

No branches or pull requests

10 participants