Visx: TooltipWithBounds overflowing its parent on small screens

[sun-tea]

I use the TooltipWithBounds to display tooltips on vx charts. I noticed that on small screens, the tooltip may overflow if neither left or right of the touch point (I'm on mobile) has enough place to fit the tooltip.
In my case, the left prop thus becomes negative. Maybe we could make the tooltip go above or below the touch point/cursor in these cases ?

[hshoff]

Hi @sun-tea, first off, that's a very nice looking chart. Great work!

Thanks for reporting this, we can get this fixed in <TooltipWithBounds />. Until the fix lands, the best work around would be to make your own <CustomTooltipWithBounds /> -- something like:

// CustomTooltipWithBounds.js

import React from 'react';
import { Tooltip } from '@vx/tooltip';
import { withBoundingRects } from '@vx/bounds';

function CustomTooltipWithBounds({
  left: initialLeft,
  top: initialTop,
  offsetLeft = 10,
  offsetTop = 10,
  rect,
  parentRect,
  getRects,
  children,
  style,
  ...otherProps
}) {

  let left = initialLeft;
  let top = initialTop;

  // custom bounds logic implementation 

  return (
    <Tooltip
      style={{ top: 0, transform: `translate(${left}px, ${top}px)`, ...style }}
      {...otherProps}
    >
      {children}
    </Tooltip>
  );
}
export default withBoundingRects(CustomTooltipWithBounds);

[sun-tea]

Yep, I was aiming for a solution like this. Thank you for the quick response Harrison, vx is an awesome lib 🙂

[sun-tea]

I'm sorry for the question which is not entirely relevant to this issue, but I was wondering if there was any other workaround other than putting a key={Math.random()} to force the tooltip to have its bounds up-to-date? If I remove that it indeed does not work properly but perf-wise I'm afraid it is not the best.

[th0th]

I came up with something like this for preventing horizontal overflow, I am sharing in case it works for somebody else, too:

if (left > parentRect.width / 2) {
  left = left - offsetLeft - rect.width;

  if (left < 0) {
    left = 0;
  }
} else {
  if (left + offsetLeft + rect.width > parentRect.width) {
    left = parentRect.width - rect.width;
  }
}

It limits the horizontal position of the tooltip to the left or right side edge.

[williaster]

Definitely think there could be more props built into Tooltip to control the desired behavior, have encountered this several times.

[LethalPants]

Can I work on this?

[m0t0r]

@williaster @hshoff should this issue be closed? It seems the PR with a fix #837 has already been merged

[williaster]

yes! thanks @m0t0r 🙏