Issue 736 - Tooltip horizontal position incorrect

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
+
 ## [4.9.0] - 2020-07-27
 ### Added
 - [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.

src/dash-table/components/ControlledTable/index.tsx

@@ -1093,9 +1093,8 @@ export default class ControlledTable extends PureComponent<
 
  if (t) {
  const cell = table.querySelector(
- `td[data-dash-column="${id}"][data-dash-row="${row}"]`
+ `td[data-dash-column="${id}"][data-dash-row="${row}"]:not(.phantom-cell)`
  );
-
  (this.refs.tooltip as TableTooltip).updateBounds(cell);
  }
  }

tests/selenium/conftest.py

@@ -91,6 +91,11 @@ def get_text(self):
  else el.get_attribute("innerHTML")
  )
 
+ def move_to(self):
+ ac = ActionChains(self.mixin.driver)
+ ac.move_to_element(self._get_cell_value())
+ return ac.perform()
+
  def is_active(self):
  input = self.get().find_element_by_css_selector("input")
 
@@ -241,13 +246,41 @@ def exists(self):
  return len(self.mixin.find_elements(".previous-next-container")) != 0
 
 
+class DataTableTooltipFacade(object):
+ @preconditions(_validate_id, _validate_mixin)
+ def __init__(self, id, mixin):
+ self.id = id
+ self.mixin = mixin
+
+ def _get_tooltip(self):
+ return self.mixin.find_element(".dash-tooltip")
+
+ def get(self):
+ return self._get_tooltip()
+
+ def exists(self):
+ self.mixin._wait_for_table(self.id)
+
+ tooltip = self._get_tooltip()
+
+ return tooltip is not None and tooltip.is_displayed()
+
+ def get_text(self):
+ return (
+ self._get_tooltip()
+ .find_element_by_css_selector(".dash-table-tooltip")
+ .get_attribute("innerHTML")
+ )
+
+
 class DataTableFacade(object):
  @preconditions(_validate_id, _validate_mixin)
  def __init__(self, id, mixin):
  self.id = id
  self.mixin = mixin
 
  self.paging = DataTablePagingFacade(id, mixin)
+ self.tooltip = DataTableTooltipFacade(id, mixin)
 
  @preconditions(_validate_row, _validate_col, _validate_state)
  def cell(self, row, col, state=_ANY):

tests/selenium/test_tooltip.py

@@ -0,0 +1,140 @@
+import dash
+import math
+import pytest
+import dash.testing.wait as wait
+from dash_table import DataTable
+
+columns = [dict(id=str(i), name="Column {}".format(i)) for i in range(1, 30)]
+
+data = []
+for i in range(1, 100):
+ datum = dict()
+ data.append(datum)
+ for j in columns:
+ datum[j["id"]] = "{}-{}".format(i, j["id"])
+
+tooltip_data_text = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_text.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="text", value=";; {}-{}".format(i, j["id"]))
+
+tooltip_data_markdown = []
+for i in range(1, 100):
+ datum = dict()
+ tooltip_data_markdown.append(datum)
+ for j in columns:
+ datum[j["id"]] = dict(type="markdown", value="### ;; {}-{}".format(i, j["id"]))
+
+base_props = dict(
+ id="table", columns=columns, data=data, tooltip_delay=None, tooltip_duration=None
+)
+
+
+def assert_aligned(cell, tooltip):
+ assert tooltip.location["x"] <= (cell.location["x"] + cell.size["width"])
+ assert (tooltip.location["x"] + tooltip.size["width"]) >= cell.location["x"]
+
+
+@pytest.mark.parametrize(
+ "fixed_rows",
+ [dict(fixed_rows=dict(headers=True)), dict(fixed_rows=dict(headers=True, data=1))],
+)
+@pytest.mark.parametrize(
+ "fixed_columns",
+ [
+ dict(),
+ dict(fixed_columns=dict(headers=True)),
+ dict(fixed_columns=dict(headers=True, data=1)),
+ ],
+)
+@pytest.mark.parametrize(
+ "ops", [dict(), dict(row_selectable="single", row_deletable=True)]
+)
+def test_ttip001_displays_aligned_tooltip(test, fixed_rows, fixed_columns, ops):
+ props = {
+ **base_props,
+ **fixed_rows,
+ **fixed_columns,
+ **ops,
+ **dict(tooltip_data=tooltip_data_text),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text() == ";; 1-1"
+ assert_aligned(cell.get(), tooltip.get())
+
+ mid = math.ceil(len(columns) / 2)
+ cell = target.cell(0, mid)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+ cell = target.cell(0, len(columns) - 1)
+ cell.move_to()
+ assert_aligned(cell.get(), tooltip.get())
+
+
+@pytest.mark.parametrize(
+ "tooltip_data,expected_text",
+ [
+ (dict(tooltip_data=tooltip_data_text), ";; 1-1"),
+ (dict(tooltip_data=tooltip_data_markdown), "<h3>;; 1-1</h3>"),
+ ],
+)
+def test_ttip002_displays_tooltip_content(test, tooltip_data, expected_text):
+ props = {**base_props, **tooltip_data}
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+
+ cell = target.cell(0, 0)
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ cell.move_to()
+ assert tooltip.exists()
+ assert tooltip.get_text().strip() == expected_text
+
+
+def test_ttip003_tooltip_disappears(test):
+ props = {
+ **base_props,
+ **dict(
+ tooltip_delay=2000, tooltip_duration=2000, tooltip_data=tooltip_data_text
+ ),
+ }
+
+ app = dash.Dash(__name__)
+ app.layout = DataTable(**props)
+
+ test.start_server(app)
+
+ target = test.table("table")
+ tooltip = target.tooltip
+
+ target.is_ready()
+
+ target.cell(0, 0).move_to()
+ assert not tooltip.exists()
+
+ wait.until(lambda: tooltip.exists(), 2.5)
+ wait.until(lambda: not tooltip.exists(), 2.5)