Skip to content

Fix DataTable tooltip position on paginated pages #3928

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.

Sign up for GitHub

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
saket3395 wants to merge 3 commits into
base: dev
Choose a base branch
from
+25 −9
Open

Fix DataTable tooltip position on paginated pages #3928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d4473c0
fix: correct DataTable tooltip position on paginated pages
Jul 31, 2026
e3a1866
fix: resolve tooltip_data lookup to absolute row index
Aug 2, 2026
3c14df7
fix: clear stale tooltip when data changes (e.g. row deletion)
Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion components/dash-table/src/dash-table/components/ControlledTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,21 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
document.removeEventListener('copy', this.handleCopy);
}

componentDidUpdate() {
componentDidUpdate(prevProps: ControlledTableProps) {
const {currentTooltip, data, setState, tooltip_data} = this.props;

// Row indices captured in currentTooltip (set on hover/move) are only
// valid for the data snapshot they were captured against. If rows are
// added/removed/reordered, those indices point at different rows now,
// so the tooltip would show stale position/content for a row that may
// no longer even be the one the user is hovering (dash#1848).
if (
currentTooltip &&
(data !== prevProps.data || tooltip_data !== prevProps.tooltip_data)
) {
setState({currentTooltip: undefined});
}

this.updateStylesheet();
this.updateUiViewport();

Expand Down
7 changes: 5 additions & 2 deletions components/dash-table/src/dash-table/derived/table/tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function getSelectedTooltip(
return (
!tt.if ||
(ifColumnId(tt.if, id) &&
ifRowIndex(tt.if, row) &&
ifRowIndex(tt.if, virtualized.indices[row - virtualized.offset.rows]) &&
ifFilter(
tt.if,
virtualized.data[row - virtualized.offset.rows]
Expand All @@ -62,7 +62,10 @@ function getSelectedTooltip(
? headerTooltip?.[row]
: headerTooltip;
} else {
tooltip = tooltip_data?.[row]?.[id];
tooltip =
tooltip_data?.[virtualized.indices[row - virtualized.offset.rows]]?.[
id
];
}

if (tooltip) {
Expand Down
11 changes: 5 additions & 6 deletions components/dash-table/src/dash-table/handlers/cellEvents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,13 @@ export const handleEnter = (
idx: number,
i: number
) => {
const {setState, virtualized, visibleColumns} = propsFn();
const {setState, visibleColumns} = propsFn();

setState({
currentTooltip: {
header: false,
id: visibleColumns[i].id,
row: virtualized.indices[idx - virtualized.offset.rows]
row: idx
}
});
};
Expand Down Expand Up @@ -202,15 +202,14 @@ export const handleMove = (
idx: number,
i: number
) => {
const {currentTooltip, setState, virtualized, visibleColumns} = propsFn();
const {currentTooltip, setState, visibleColumns} = propsFn();

const c = visibleColumns[i];
const realIdx = virtualized.indices[idx - virtualized.offset.rows];

if (
currentTooltip &&
currentTooltip.id === c.id &&
currentTooltip.row === realIdx &&
currentTooltip.row === idx &&
!currentTooltip.header
) {
return;
Expand All @@ -220,7 +219,7 @@ export const handleMove = (
currentTooltip: {
header: false,
id: c.id,
row: realIdx
row: idx
}
});
};
Expand Down
Loading