Tooltip position appears in upper left corner after filtering or sorting in the datatable

dash==1.9.1
dash-table==4.6.1

I have a filterable, sortable (by column) dash datatable.

The tooltip shows up fine when sorting/filtering is not active in the table. However, the tooltip appears at unexpected position (upper left most corner in the current datatable). How do I fix this?? Thank you!!!

Best,
Cheryl

3 Likes

Thanks for reporting! Could you share a simple example and/or a screenshot? This sounds like a bug

Hi @chriddyp,

Thank you for the reply!!

Here is an example:
I have the original datatable like the following

The tooltips show up fine without filtering. However, they jump around when I have filtered on the first column (as shown ezgif.com-crop|498x328)

Please let me know if you have any questions! Thank you!

Furthermore,

Here is the code I used to create the table above.

sample_data = pd.DataFrame([['A', 'row 1 column 2', 'row 1 column 2'],
                            ['A', 'row 1 column 2', 'row 1 column 3'],
                            ['B', 'row 2 column 2', 'row 2 column 3'],
                            ['C', 'row 3 column 2', 'row 3 column 3'],
                            ['A', 'row 4 column 2', 'row 4 column 3'],
                            ['B', 'row 5 column 2', 'row 5 column 3'],
                            ['C', 'row 6 column 2', 'row 6 column 3'],
                            ['A', 'row 7 column 2', 'row 7 column 3'],
                            ['B', 'row 8 column 2', 'row 8 column 3'],
                            ['C', 'row 9 column 2', 'row 9 column 3'],
                            ['A', 'row 10 column 2', 'row 10 column 3'],
                            ['B', 'row 11 column 2', 'row 11 column 3'],
                            ['C', 'row 12 column 2', 'row 12 column 3'],
                            ['A', 'row 13 column 2', 'row 13 column 3'],
                            ['B', 'row 14 column 2', 'row 14 column 3'],
                            ['C', 'row 15 column 2', 'row 15 column 3'],
                            ['A', 'row 16 column 2', 'row 16 column 3'],
                            ['B', 'row 17 column 2', 'row 17 column 3'],
                            ['C', 'row 18 column 2', 'row 18 column 3']], columns=["Column 1", "Column 2", "Column 3"])

layout = html.Div(className='container-fluid', children=[
    html.Div(id='unavailable-container', className='table-container', children=[
        dash_table.DataTable(
            id='datatable-interactivity-cid',
            columns=[{"name": i, "id": i, "deletable": True} for i in sample_data.columns],
            data=sample_data.to_dict("rows"),
            fixed_rows={'headers': True, 'data': 0},
            style_cell={'minWidth': '250px', 'width': '250px', 'maxWidth': '250px',
                        'whiteSpace': 'normal'},
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            style_table={
                'width': '600px', 'height': '500px'
            },
            tooltip_data=[
                {
                    col: str(sample_data.loc[i, col]) for col in sample_data.columns
                } for i in range(0, sample_data.shape[0])
            ]
        )
    ]),
])

@cherylwang, i also encountered such issue. but i found it only appear in “native” mode. if you use “custom” mode for filter and sort , you can bypass it.

1 Like

awesome, thank you for the tricks, definitely gonna give it at try! Thank you!

Hi ,
I too am facing the similar issue.

  1. The data in the tooltip falls out of the the tooltip box.
  2. Tooltip shows up at different locations.
  3. After filters are applied to dataTable, tooltip is not updated. [Got this working by correcting callback]

Is there a way to position the tooltips, and play with tooltip box size and shape.

Thanks in advance.

1 Like

I’m facing two similar errors.
The first one: The tooltips of my datatable works well on first page, but when I go through the next pages, it appears in the upper left corner.
Similar to this post: Tooltip position appears in upper left corner after filtering or sorting in the datatable.
The second one: When I apply serverside filters to my datatable’s data (triggered by some buttons pushing), my tooltips keep showing the values of the first displayed table (filterless).

4 Likes

Does anyone have a solution?

Same issue, any clues?

The response by @simon_ma above is right on - this happens with native sorting/filtering and does not when these are set to ‘custom’. I have not however implemented my own filter and sort functionality to see if it works with something in custom in place.

I now remember that I found this issue a year ago as well. It really would be nice to get the tooltips working - at this point they aren’t really functional.

I’ve confirmed that tooltips look great when you do your own sorting, filtering, and pagination. I have not upgraded, so it also allowed me to build in case insensitivity and other things we needed that weren’t available previously. Not sure if tooltips are working with native sorting yet…