feat(tooltip): improve positioning with popperjs

[nickofthyme]

Summary

This replaced our current tooltip positioning logic with popperjs.

Why bother? Well positioning is tricky and based on the current implementation there are some limitations to positioning relative to the window, this comes into play for really small charts.

View on local storybook: http://localhost:9001/?path=/story/bar-chart--test-tooltip-and-rotation

There is now a Portal component that is simply a presentation component that renders it's content to the root of the dom. You are able to pass the portal an anchor in which the portal will use to position itself. This anchor can be an HTMLElement or a postion values relative to a given ref HTMLElement.

These changes also allow greater flexibility in the size, specifically the width, of the tooltip. Currently the width is set manually for the tooltip to grow. However, with these changes, the tooltip can have a max-width and grow to that values without collapsing early. This also applies to any CustomTooltip component that is used in place of the default.

New Tooltip options

export interface TooltipProps {
  /**
   * Preferred placement of tooltip relative to anchor.
   *
   * This may not be the final placement given the positioning fallbacks.
   *
   * @default Placement.Right
   */
  placement?: Placement;
  /**
   * If given tooltip placement is not sutable, these `Placement`s will
   * be used as fallback placements.
   */
  fallbackPlacements?: Placement[];
  /**
   * Render custom tooltip given header and values
   */
  customTooltip?: CustomTooltip;
}
type Placement = "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "auto" | "auto-start" | "auto-end"

Changes

This works by creating a pseudo anchor element from the calculated AnchorPosition values.

Notice the blue element behind the chart for illustration purposes.

Why Popperjs?

Pros:

• Trusted source used for many applications
• No need to tinker with countless positioning edge cases
• Positions based on window or supplied boundary element. This would allow for optionally allowing the tooltip to go outside of the chart area (i.e. for smaller charts), or confine the tooltip to the chart element if desired.
• It allows the option to set default placement and multiple fullbacks. Try right, else left, else top, else bottom.
• More control over popover placement without fear of regressions

Cons:

• Adds a little bloat to the code. https://bundlephobia.com/result?p=@popperjs/[email protected]. But we can use the lite version to reduce the bloat by only using the modifiers we need.

Checklist

Delete any items that are not applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility, including a check against IE11
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios

[monfera]

Good changes! I tested it on OS X with Chrome, Safari and FireFox, various chart types, various browser zoom levels via the menu, various pinch zoom levels and various scroll positions (by eg. shrinking the story page to lure out a vertical scrollbar).

323 files changed, many of them apparently unrelated to the goal of the PR, it'd be great to write up those changes so those can be isolated and reviewed too.

Also, a bunch of images changed; it looks initially OK as they seem to be interaction related, but not sure if the image changes are desired, eg. axes and even tooltip got removed here and there, eg.
unless I'm looking at it the wrong way

[nickofthyme]

@monfera yeah I added an eslint rule for react hooks that required some file changes, namely the correct component naming of functional components. This required changing all the example story variables to Example, but that is all contained in a single commit.

The screenshots are off because I was changing the story to allow more uniform padding around the chart. I will add this to the other PR with the other changes to vrt. see 9c534e7

[monfera]

Thanks @nickofthyme - makes sense. I suppose it'll cause the tooltip(s) to return to those screengrabs too

[monfera]

Eg. here the tooltip seems to have moved away

and there's another very similar one.

There's also this where, unlike with most cases, the tooltip positioning is less good than before (top protrudes, is clipped), is it a problem?

[nickofthyme]

Yup. The first screenshot is now containing the tooltip beyond the chart container, which is an expected change. The placement is set to top and before would fallback to bottom to be contained within the chart element. We now allow placement relative to the window or a defined boundary such as the chart container. This was the root of the issue with #596 and the main motivation to use popper.

The second screenshot is also intended. The cursor is now centered relative to the tooltip. There is an option for right-start to position the tooltip how it currently is but I think this new placement is better.

@markov00 / @rshen91 any thoughts on this? see demo below. Notice the vertical placement of the tooltip relative to the cursor.

Current

New

[monfera]

Thanks @nickofthyme I played with it some more around the edge and it's very nice, there's no cropping of the tooltip so it's all good. That it looks cropped is simply due to where the test mouse position is and what area is screenshot

[monfera]

Looks great! A lot of attention to detail 🎉 Thanks for the updates. Good to merge, unless there's any unresolved ask from @markov00 or @rshen91

[markov00]

weird....I will open a PR to fix this

[nickofthyme]

Thanks, wasn't sure what this was from.

[markov00]

LGTM, I've pushed two small commits to fix some missing tsdocs and exported types

[nickofthyme]

@markov00 Is this required? I thought @public was the default.

[nickofthyme]

👍

[markov00]

🎉 This PR is included in version 19.4.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀