Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BarStack] Weird behavior of tooltip when chart is preceded with html element. #1016

Closed
wisyr opened this issue Jan 11, 2021 · 2 comments · Fixed by #1018
Closed

[BarStack] Weird behavior of tooltip when chart is preceded with html element. #1016

wisyr opened this issue Jan 11, 2021 · 2 comments · Fixed by #1018

Comments

@wisyr
Copy link

wisyr commented Jan 11, 2021

First of all, thank you for an outstanding library that finally solves all of the issues related with charts in React.

My problem is related with tooltip positioning in BarStack chart. In a brief - if the BarStack chart comes as the first child, the tooltip is positioned correctly. However if I place it after some component or just after a div, tooltip position changes unexpectedly.

I have created a demo for you. https://codesandbox.io/s/holy-pine-i5sp2?file=/index.tsx

If you hover the bars, you will see that the tooltip appears down below the bars. If we would extend the preceding div height to e.g. 500px, you will see that the tooltip will even go out of the screen when hovering bars.

However, if you remove the preceding div and keep only the chart, the tooltip position will work just fine.

Question: Looking forward for a tip in such case. How to keep the tooltip in place, even if there's some content with a dynamic height before the chart?

Thank you!

@williaster
Copy link
Collaborator

Hey @wisyr 👋 thanks for checking out visx, glad you're enjoying it so far 🎉 .

Thanks for the codesandbox link, I think this is happening because TooltipInPortal expects top/left to be relative to the container it is rendered in. If nothing is rendered above the chart, that happens to be the same as the event.clientY logic.

I have a PR out (#1018) to make the example's logic more robust, lmk if you have any followup questions! (you should be able to match the updated logic in the PR, don't need to wait for it to merge)

@wisyr
Copy link
Author

wisyr commented Jan 12, 2021

@williaster Works like a charm 🎉 Thank you!

@wisyr wisyr closed this as completed Jan 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants