Nivo: dynamically determine best tooltip anchor

[humanchimp]

Version of nivo tested: 0.58.0

Is your feature request related to a problem? Please describe.
Our concern/feature request is primarily related to the line chart, but this affects other chart types too.

After upgrading to a recent version of nivo, the tooltips stopped being positioned relatively such that they don't overflow the bounding box. In a previous version we were using (0.31.0, specifically), the tooltip would adjust by anchoring itself on the opposite side of the cursor when the pointer reached the midpoint. Now it seems the scheme has changed and an anchor attribute must be provided.

I don't think this option will let us dynamically position the tooltip to avoid colliding with the boundary.

Describe the solution you'd like
It would be better for us if the tooltip would dynamically anchor itself like it used to. Alternatively, we'd like to be able to use a hook to determine the best anchor dynamically

Describe alternatives you've considered
I considered sending a PR to modify the positioning logic, but I don't feel comfortable with this approach.

https://github.com/plouc/nivo/blob/master/packages/tooltip/src/hooks.js#L29-L41

const bounds = container.current.getBoundingClientRect()
let x = event.clientX - bounds.left
let y = event.clientY - bounds.top

if (anchor === 'left' || anchor === 'right') {
  if (x < bounds.width / 2) anchor = 'right'
  else anchor = 'left'
}

Basically, I cannot imagine something like this being mergeable, although it does work well for my application.

I would like to solve this problem by potentially allowing an "auto" option for anchor, or something like that.

Additional context
I sincerely hope this is a feature request, and not simply a demonstration of ignorance on my part. I tried to figure this out myself before resorting to this request

[chirgjn]

Hey if no one is working on this, should I submit a PR
I need this fix for a project at work 😁

[chirgjn]

@plouc is the change by @humanchimp enough? I was thing to check the bounds of the tooltip with the container to determine if it fits and change the anchor if that's not the case.

Also what are your thoughts on letting the user opt into this behaviour via a flag in props? Because sometimes I'm ok when my tooltips get outside the container.

[shihlinlu]

Agreed with @chirgjn about the flag prop option instead of making it dynamic in all cases.

[humanchimp]

i don't think nivo is deprecated? As the author of this issue, I was doubtful that my approach, which was just copypasta from elsewhere in the codebase, would be high quality enough to merge. I have been using a fork of just the @nivo/tooltip package which applies my patch, and that works for my needs, and means that actually having my changes merged upstream is not a priority. If not having #631 merged in is causing you difficulty, I recommend doing likewise for now.

[kkkrist]

I'm using your patch and it works great for my use cases. Btw, I'm applying it via patch-package, so I don't need to fork it or change my npm deps.

Also I just want to say I appreciate your humility very much.

[contra]

Has anyone managed to get this to work on both the X and Y axis? The code above works great for X but Y is a little trickier, since you need to compute the height of the tooltip to do it AFAIK.

[serj-prog]

The issue still exists. Is anybody going to work on it?

[jeffshek]

A workaround I used here was to use a css position: absolute on the tooltip. (Thx for your work on Nivo, this package is amazzzzzing!)

<ResponsiveLine tooltip={TooltipFormat}/>

const TooltipFormat = ({ point }, ...rest) => {
    // example, app.betterself.io/demo 
    return <StyledDivWithAbsolutePosition/>
}

[Luke1298]

It would also be cool if we could choose which way we wanted our tooltips to anchor; it seems like the library is choosing right for tooltip "slices" and top for everything else.