Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG]: Coupled hoverinfo tooltips are misaligned

Open
  • Is something wrong?
#7,664 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
data-visualization

Research direction

Run the attached demo.py to generate output.html, then inspect demo.js and the coupled Fx.hover interaction in the browser. Compare the tooltip positions and arrow directions for the two adjacent heatmaps; done means the coupled hover tooltips align consistently while preserving the standard arrow behavior where appropriate.

Written by the indexing model from the issue text.

Description

bug
Description

I have setup a coupled hover effect for two adjacent heatmaps using Fx.hover. As shown in the Gif below, the two hoverinfo boxes don't align. Technically, their arrows do point to the same locations in their respective heatmaps, but the left arrow points sharply upward and the right arrow points sharply downward. I think this makes the visualisation harder to interpret.

Screenshots/Video

This Gif shows the misaligned hoverinfo boxes.

Image

This screenshot shows the misalignment. I have drawn on the blue line for clarity. Note how the left tooltip is below the point, with its arrow pointing upwards, while the right tooltip is above the point, with its arrow pointing downwards. I feel like the tooltips should match one another and be aligned.

Image

These are the arrows that I get when the coupled hover effect is active.

Image

These are the 'standard' arrows that I get when the coupled hover effect is inactive. By this, I mean when I have commented-out the JavaScript that calls Fx.hover to update the tooltips. I would prefer if both tooltips had this style of arrow at all times, except for when the alternative style of arrow is really necessary.

Image
Steps to reproduce

I have attached two files. The Python file creates the plot and then injects the JS file, which handles the coupled hover interaction. Running the Python file creates an output.html file, which you can open in a browser and see the results shown above.

demo.js (~15 lines)
demo.py (~30 lines)

Notes

I considered hiding the tooltip arrows as in #7278 but that would make the issue worse, since the tooltip boxes do not line up with each other.

Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
1d 19h
Merged PRs (30d)
21

Getting set up

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.

More from plotly/plotly.js

All issues in plotly/plotly.js

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.