fix: DataTable tooltip placement on paginated pages

components/dash-table/src/dash-table/derived/table/tooltip.ts

@@ -42,7 +42,10 @@ 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]

components/dash-table/src/dash-table/handlers/cellEvents.ts

@@ -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
         }
     });
 };
@@ -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;
@@ -220,7 +219,7 @@ export const handleMove = (
         currentTooltip: {
             header: false,
             id: c.id,
-            row: realIdx
+            row: idx
         }
     });
 };

components/dash-table/tests/js-unit/cellEvents_tooltip_pagination_test.ts

@@ -0,0 +1,52 @@
+import {expect} from 'chai';
+
+import {handleEnter, handleMove} from 'dash-table/handlers/cellEvents';
+
+describe('cell events - tooltip row index with pagination', () => {
+    it('uses the provided row index when entering a cell', () => {
+        let state: any;
+        const propsFn = () =>
+            ({
+                setState: (next: any) => {
+                    state = next;
+                },
+                visibleColumns: [{id: 'Description'}],
+                virtualized: {
+                    indices: [5, 6, 7, 8, 9],
+                    offset: {rows: 0, columns: 0}
+                }
+            }) as any;
+
+        handleEnter(propsFn, 6, 0);
+
+        expect(state.currentTooltip.row).to.equal(6);
+        expect(state.currentTooltip.id).to.equal('Description');
+        expect(state.currentTooltip.header).to.equal(false);
+    });
+
+    it('uses the provided row index when moving between cells', () => {
+        let state: any;
+        const propsFn = () =>
+            ({
+                currentTooltip: {
+                    header: false,
+                    id: 'Description',
+                    row: 5
+                },
+                setState: (next: any) => {
+                    state = next;
+                },
+                visibleColumns: [{id: 'Description'}],
+                virtualized: {
+                    indices: [5, 6, 7, 8, 9],
+                    offset: {rows: 0, columns: 0}
+                }
+            }) as any;
+
+        handleMove(propsFn, 6, 0);
+
+        expect(state.currentTooltip.row).to.equal(6);
+        expect(state.currentTooltip.id).to.equal('Description');
+        expect(state.currentTooltip.header).to.equal(false);
+    });
+});