Issue 365 - Fix tooltip position & display with fixed columns/rows (#366)

Author: Marc-Andre-Rivet

packages/dash-table/CHANGELOG.md

@@ -10,6 +10,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Added support for single and double quoted column id with arbitrary name
 
 ### Fixed
+[#365](https://github.com/plotly/dash-table/issues/365)
+- Incorrect tooltip behavior if cell is in a fixed row or column
+
 - Incorrect default value for `column_static_tooltip` changed from [] to {}
 
 ## [3.3.0] - 2019-02-01

packages/dash-table/dash_table/bundle.js

@@ -51,9 +51,9 @@
     "@percy-io/percy-storybook": "^2.1.0",
     "@storybook/cli": "^4.1.11",
     "@storybook/react": "^4.1.11",
-    "@types/ramda": "^0.25.47",
-    "@types/react": "^16.7.22",
-    "@types/react-dom": "^16.0.11",
+    "@types/ramda": "^0.25.48",
+    "@types/react": "^16.8.2",
+    "@types/react-dom": "^16.8.0",
     "@types/react-select": "^1.3.4",
     "babel-loader": "^8.0.5",
     "core-js": "^2.6.3",
@@ -67,9 +67,9 @@
     "npm": "^6.7.0",
     "npm-run-all": "^4.1.5",
     "ramda": "^0.26.1",
-    "react": "16.7.0",
+    "react": "16.8.1",
     "react-docgen": "^3.0.0",
-    "react-dom": "16.7.0",
+    "react-dom": "16.8.1",
     "react-select": "^1.3.0",
     "remarkable": "^1.7.1",
     "sheetclip": "^0.3.0",
@@ -78,8 +78,8 @@
     "tslint": "^5.12.1",
     "typescript": "^3.3.1",
     "wait-on": "^3.2.0",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1",
+    "webpack": "^4.29.2",
+    "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14",
     "webpack-preprocessor": "^0.1.12"
   },

packages/dash-table/dash_table/bundle.js.map

@@ -14,6 +14,7 @@ import { TooltipSyntax } from 'dash-table/tooltips/props';
 
 export enum AppMode {
     Default = 'default',
+    FixedTooltips = 'fixed,tooltips',
     FixedVirtualized = 'fixed,virtualized',
     ReadOnly = 'readonly',
     ColumnsInSpace = 'columnsInSpace',
@@ -108,9 +109,20 @@ function getSpaceInColumn() {
     return state;
 }
 
+function getFixedTooltipsState() {
+    const state = getTooltipsState();
+
+    state.tableProps.n_fixed_columns = 3;
+    state.tableProps.n_fixed_rows = 4;
+
+    return state;
+}
+
 function getTooltipsState() {
     const state = getDefaultState();
 
+    state.tableProps.tooltip_delay = 250;
+    state.tableProps.tooltip_duration = 1000;
     state.tableProps.tooltips = {
         ccc: [
             { type: TooltipSyntax.Markdown, value: `### Go Proverb\nThe enemy's key point is yours` },
@@ -122,7 +134,7 @@ function getTooltipsState() {
         ]
     };
     state.tableProps.column_static_tooltip = {
-        ccc: { type: TooltipSyntax.Text, value: `There is death in the hane`, delay: 1000, duration: 5000 },
+        ccc: { type: TooltipSyntax.Text, value: `There is death in the hane` },
         ddd: { type: TooltipSyntax.Markdown, value: `Hane, Cut, Placement` },
         rows: `Learn the eyestealing tesuji`
     };
@@ -144,8 +156,6 @@ function getTooltipsState() {
         if: {
             column_id: 'bbb-readonly'
         },
-        delay: 1000,
-        duration: 5000,
         type: TooltipSyntax.Markdown,
         value: `### Go Proverbs\nUrgent points before big points\n![Sensei](https://senseis.xmp.net/images/stone-hello.png)`
     }];
@@ -208,6 +218,8 @@ function getState() {
     const mode = Environment.searchParams.get('mode');
 
     switch (mode) {
+        case AppMode.FixedTooltips:
+            return getFixedTooltipsState();
         case AppMode.FixedVirtualized:
             return getFixedVirtualizedState();
         case AppMode.ReadOnly: