Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Tooltips dont work properly when application zoom is changed
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
Drag your mouse along the graph and you will see that the graph thinks the mouse is to the left of where it actually is
What is expected?
The tooltip should follow the mouse regardless of the zoom
What is actually happening?
The tooltips are not appearing for the correct data points since the graph thinks the mouse is to the left
| Environment | Info |
|---|---|
| Recharts | v1.8.5 |
| React | 16.13.1 |
| System | macOS (10.15.4) |
| Browser | Chrome (80.0.3987.149) |
In the sandbox, the only thing i changed from the default recharts fork was add the following to index.html’s root id:
style="zoom:75%"
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:9
Top Results From Across the Web
Tool Tip is not showing properly when Zoom in & Zoom out on ...
i want the tool tip to adjust its width according to text the tool tip text should be shown in single line only....
Read more >Tooltips Don't Increase in Size When Browser Zoom Level ...
The jQuery ones that XenForo renders do increase in size when zooming, however: Tooltips Don t Increase in Size When Browser Zoom Level ......
Read more >7315 (Tooltip doesn't handle positionning properly ... - jQuery UI
Quickly discover that css width/height don't work well with the way the theme icons are cut out of a shared image. Try css...
Read more >Managing manual captioning - Zoom Support
Manual captioners can access the caption window if they click on the tooltip that appears when the host has assigned them to caption....
Read more >Tooltips · Bootstrap v5.0
Triggering tooltips on hidden elements will not work. Tooltips for .disabled or disabled elements must be triggered on a wrapper element.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I have been struggling with this issue too, and ended up using a custom tooltip component with a fixed position that used a custom event listener to detect the mouse position.
You will have to separately track the data to display in the tooltip using the useMouseEnter event handler provided by Recharts, and hide the tooltip using the useMouseLeave event handler.
Basically, use Recharts to track the content and open/close status of the tooltip and your own code to track the mouse position. If anyone is interested in an example, I can spin one up in CodeSandbox.
bump