nivo
nivo copied to clipboard
Disabling tooltip without disabling interactivity
Is your feature request related to a problem? Please describe.
I would like to have more control over how exactly the tooltips are rendered. For instance, I would like to render them in a portal so that they are not cut by the container or use custom positioning logic. Right now it doesn't seem to be possible without redefining item components e.g. barItemComponent
which is quite a limitation. It is possible to disable interactivity but that also disables other interactive features e.g. the crosshair and the onMouse…
event handlers are not called at all.
Describe the solution you'd like
There should be a property isTooltipEnabled
which would disable the tooltip when passed false
without disabling the onMouse…
event handlers. Alternatively, passing null
to the tooltip
prop could also disable tooltip.
Additional context
Large tooltip in a small chart is cut because it's not rendered in a portal in a container which needs to use overflow: hidden
or overflow: scroll

Hi @ilyabo. You mentioned passing null to the tooltip to disable it. A similar approach could be to render an empty tooltip with tooltip={() => (<></>)}
Yes, thanks! I've actually discovered this approach too now and it works for me at least as a workaround. Does it still mean though that some resources are spent on rendering/positioning or can this be neglected? In any case, I think accepting null
or false
and documenting it would be more straightforward and helpful for the users of the API.
Also, offering an option to render the tooltip in a portal would be very helpful I think. Something like tooltipUsePortal
which could take a DOM node to render to and default to document.body
if just true
is passed
Noticed that onMouse…
events in the Line
chart only work when enableSlices is false. That's unfortunate, because we need to use the slices mode and customize the tooltip. Is there a way to circumvent this limitation?
The line chart is due an update in #1932. This could be a topic to keep an eye on.
I started a related discussion here: https://github.com/plouc/nivo/discussions/2044
@tkonopka not related to this topic, but there are no responses to opened issues recently, is this project actively maintained.
@vikrantsingh47, actively, not really lately, it depends on my other constraints (job, family, ...)
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!