dynamically determine best tooltip anchor

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 😁

[hadasmaimon]

you can workaround with breaking word:

word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
max-width: 10rem;