Tooltip doesn't work with horizontal scroll

[chriddyp]

As reported here: https://community.plotly.com/t/datatable-tooltip-view-appears-limited-to-scope-of-page-only/37576

[chriddyp]

cc @Marc-Andre-Rivet - For when you are in the neighborhood

[tashrifbillah]

Thanks @chriddyp , happy to collaborate :)

[chriddyp]

@tashrifbillah - Could you share with version of dash-table you are using? If you are not on the latest, could you try upgrading and see if the issue persists?

[tashrifbillah]

Is it not the latest?

In [9]: dash_table.__version__
Out[9]: '4.6.1'

[chriddyp]

It's pretty close - The latest is 4.6.2. You can upgrade with pip install dash --upgrade, however I suspect the issue will persist as we did not fix any issues related to this in 4.6.2 (https://github.com/plotly/dash-table/blob/dev/CHANGELOG.md).

[tashrifbillah]

Hi @chriddyp , I have an update for you. It appears that tooltip displays as expected on Internet Explorer 11. Previously, I was looking at Google Chrome only. Can you check this behavior at your end?

[cldougl]

This is still occurring in the latest version of Dash 1.14.0 (/ Dash Table)

[tashrifbillah]

Yeah, probably they didn't get time to work on it.

[dshenderson]

Is there any progress on this issue? This bug is stopping us putting our app into production.

[chriddyp]

@dshenderson - This is the next item in the queue for us, so it should be available within a couple of weeks. For now, you'll need to downgrade dash if you need this feature and not the others.

[dshenderson]

Downgrading is not an option, as you fixed a critical bug in 1.14.0. Thanks.

[Marc-Andre-Rivet]

For the case described above the culprit seems to be a bad default style defined here: https://github.com/plotly/dash-table/blame/dev/src/dash-table/components/ControlledTable/index.tsx#L45

const DEFAULT_STYLE = { 
    width: '100%'
};

Changing it to:

const DEFAULT_STYLE = {
    width: '100%',
    overflow: 'auto'
};

or adding the following prop to the table:

style_table=dict(overflow='auto')

make the example table's tooltip behave as expected.

Not sure at this point what the implications of adding the CSS prop/value to the default is on all scenarios.Also, the container size is also off and causing different alignment issues between tooltip/cell for fixed_columns=dict(headers=True)

---

Update: Above analysis is wrong. This is a regression introduced by the phantom-cells in #722.