plotly / plotly/dash

Allow modification of position/direction and style of dash_table tooltips

Open
#2,475 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

dash-data-table feature P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No implementation files or tests are named in the issue. Start at the dash_table.DataTable API and the conditional-tooltips documentation linked in the report; verify the requested position or direction and per-tooltip style inputs, then confirm conditional tooltips render with those settings.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.