-
Notifications
You must be signed in to change notification settings - Fork 712
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
withTooltip enhancer can't be used on components that render within an svg #609
Comments
Hey @ptmx 👋 thanks for checking out Still, your proposal could enable more flexibility. I wonder if rather than making a breaking change and removing the |
Hi @williaster 👋! Thanks for the reply. Yeah, for a one-off case it's definitely possible to use
That approach makes sense to me - I'll follow up on the corresponding PR (#610) this week. I'll likely also make a |
That all makes sense and sounds good 👍 Excited to hear about the interest in a For more context on |
Closed via #631 |
The
withTooltip
enhancer from@vx/tooltip
currently adds a container div that wraps the component: https://github.com/hshoff/vx/blob/f8e6c6d20dd146de8fbf3879aa00806619ad0ffc/packages/vx-tooltip/src/enhancers/withTooltip.tsx#L75-L87Since HTML elements can't be appended to SVG elements, this means that the
withTooltip
enhancer can't be used on components that will be rendered within an SVG, such as anAxis
.I made a minimal example of a reusable
AxisBottomWithTooltip
component that adds tooltips to axis tick labels, but I have a similar use case in a charting library I'm building for a project.In the example above, I modified
withTooltip
to render the wrapped component directly, without inserting the containerdiv
, so the axis renders correctly with the tooltip even though it's rendered within an SVG element.Using the
withTooltip
enhancer from@vx/tooltip
instead, nothing is rendered due to the containerdiv
.The downside of removing the container div is that it would be a breaking change for any existing code which relies on the container, so users would have to migrate by adding such a container around their enhanced component instead. From my point of view that seems like the more flexible approach, but I might be missing some context on why it's helpful for the container
div
to be added bywithTooltip
.The text was updated successfully, but these errors were encountered: