add argument to modify hover box position/direction
Open
Nobody has claimed this yet.
cs
feature
P2
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
Right now developers can't modify the hover box position respective to the point the user is hovering. The hover box position is determined by:
- The numbers in the
"transform=translate(valuex, valuey)"argument of thegelement withclassName="hovertext": https://github.com/plotly/plotly.js/blob/master/src/components/fx/hover.js#L1200 - The shape specified in
din thepathelement (for the triangle orientation): https://github.com/plotly/plotly.js/issues/7278
https://github.com/user-attachments/assets/0634d079-b4eb-4325-af67-d13ac0fc6ba1
Desired behavior:
- Some argument like dcc.Tooltip
direction: https://dash.plotly.com/dash-core-components/tooltip#tooltip-properties - It should also allow diagonal/combined positions ("bottom+right")
# the python way
fig.update_traces(hoverbox_direction="right")
fig.update_traces(hoverbox_direction="left+top")
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/components/fx/hover.js around the g element with className="hovertext" and its transform, then review issue #7278 for the hover triangle orientation. Define how a direction argument should map to the hover box and triangle, including combined directions such as "left+top"; done means callers can select these positions through the requested trace configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100