[tooltip] add offset props to <TooltipWithBounds />

[williaster]

🚀 Enhancements

The goal of this PR is to fix issues like this where the tooltip overlaps the point:

To do so I added optional leftOffset and topOffset props to the <TooltipWithBounds /> which offset the final left and top positions depending on the boundingClientRects it receives from withBoundingRects:

• if the tooltip will be right of the pointer, it it shifted +leftOffset
• if the tooltip will be left of the pointer, it it shifted -leftOffset
• if the tooltip will be below of the pointer, it it shifted +topOffset
• if the tooltip will be above of the pointer, it it shifted -topOffset

I also considered creating computeLeft({ left, rect, parentRect }) and computeTop({ top, rect, parentRect }) props that allow the user to fully override the calculation but decided this was a little simpler.

Let me know if you have thoughts!

Tested functionally:

[hshoff]

Makes sense. LGTM

[techniq]

I was just admiring Rechart's tooltip today ironically and how they keep the tooltip within the bounds of the chart and not block the point. They appear to be using a single offset (10), but the same approach. LGTM too