Skip to content

Allow modification of position/direction and style of dash_table tooltips #2475

Open
@celia-lm

Description

@celia-lm

Context

  • The tooltip is always positioned under its corresponding cell, except in the last rows where it's positioned on top. This automatic behaviour cannot be modified.
  • Right now it's only possible to modify the general style of all of the tooltips with the css argument of dash_table.DataTable

Describe the solution you'd like
Add an argument similar to tooltip_position an a style key in tooltip_conditional, that could be used like:

dash_table.DataTable(
    ...,
    tooltip_position='top',
    tooltip_conditional= {
            'if': {
                'filter_query': '{Region} contains "New"'
            },
            'type': 'markdown',
            'value': 'This row is significant.',
            'style': {'background-color':'red', 'max-width':'100px'}
        }
    ]

Describe alternatives you've considered
The tooltip is not a container per cell, but a general container that covers the whole table, and I guess somehow it gets the mouse position and calculates the appropriate position for the visible hover div (the position is specified in css with position: absolute and then top: XXXpx left: XXXpx)

I have explored solutions with the different tooltip properties of dash_table (https://dash.plotly.com/datatable/tooltips#conditional-tooltips) but there are no keys in the tooltip dict to specify the position/direction.

I've explored a workaround by including the table as the children of a dmc.Tooltip and modifying its position based on the hover info of the table, but it didn't work. I will open a feature request so that the Product Team takes this into account for future developments.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogdash-data-tablerelated to DataTable componentfeaturesomething new

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions