Tooltip doesn't work with horizontal scroll

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

@Marc-Andre-Rivet

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

@chriddyp

Thanks @chriddyp , happy to collaborate :)

@tashrifbillah

@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?

Is it not the latest?

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

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).

@chriddyp

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?

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

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

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

@dshenderson

@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.

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

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.

@Marc-Andre-Rivet

@Marc-Andre-Rivet , unfortunately, the issue doesn't appear fixed yet. Did you use the big csv file I provided?

I updated my dash installation which currently is:

In [1]: import dash

In [2]: dash.__version__
Out[2]: '1.16.2'

I tried this on two browsers--Chrome and Edge on a Windows 10 computer. Happy to work on it again.

So where did you test it?

@tashrifbillah

Thanks for following up @tashrifbillah ! Indeed it looks like the issue isn't fixed for your dataset. Reopening.

So where did you test it?

You can see the tests cases in the original PR: https://github.com/plotly/dash-table/pull/817/files

Reproducing the issue for the unfixed rows+columns case, which is the only one that seems to be exhibiting the behavior and also the only one not currently covered by https://github.com/plotly/dash-table/pull/817/files#diff-1354323b0f137fce6c41eb5b41b46c6aR55. Adding it fails for all combinations.

Removing code unrelated to the issue at hand, the minimal example seems to be:

import dash
from dash_table import DataTable
import pandas as pd

df= pd.read_csv('outliers_long.csv', nrows=20)

app = dash.Dash(__name__)
app.layout = DataTable(
    id='table',
    columns=[dict(name=i, id=i) for i in df.columns],
    data=df.to_dict('records'),
    tooltip={c: dict(type='text', value='potato')  for c in df.columns}
)

if __name__=='__main__':
    app.run_server()

@Marc-Andre-Rivet

Hi @Marc-Andre-Rivet , if I do

pip install git+https://github.com/plotly/dash-table.git@b61c8ccdb9c564a6665a92459fa3825314b4618e

I should be getting the latest commit, shouldn't I? If that is right, the issue still does not appear fixed for the csv file I provided.

@tashrifbillah

@tashrifbillah dev commits do not include a table build so I'm not sure what you would be running after executing the command above.

If you want to run the latest from dev you will have to build it first and then install it. Something like this:

git clone --depth 1 https://github.com/plotly/dash-table.git
cd dash-table && npm ci && npm run build
pip install -e .

Tried but I ended up breaking my whole dash. I think I shall wait until 1.16.4 is available and then test. :)

Navigation Menu

Repository navigation

Tooltip doesn't work with horizontal scroll #736

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tooltip doesn't work with horizontal scroll #736

Description

Activity

chriddyp commented on Apr 13, 2020

tashrifbillah commented on Apr 13, 2020

chriddyp commented on Apr 13, 2020

tashrifbillah commented on Apr 13, 2020

chriddyp commented on Apr 13, 2020

tashrifbillah commented on Apr 21, 2020

cldougl commented on Jul 28, 2020

tashrifbillah commented on Jul 28, 2020

dshenderson commented on Aug 4, 2020

chriddyp commented on Aug 4, 2020

dshenderson commented on Aug 4, 2020

Marc-Andre-Rivet commented on Aug 10, 2020

tashrifbillah commented on Oct 1, 2020

chriddyp commented on Oct 1, 2020

Marc-Andre-Rivet commented on Oct 1, 2020

tashrifbillah commented on Oct 28, 2020

Marc-Andre-Rivet commented on Oct 28, 2020

tashrifbillah commented on Oct 28, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions