Tooltips With Bounds considering also screen bounds (window frame)

[manuelrocha88]

💥 Breaking Changes

• N/A

🚀 Enhancements

• now it consider window frame. If chart is only half visible the tooltip will adjust to window frame and not get cut.

📝 Documentation

• N/A

🐛 Bug Fix

• N/A

🏠 Internal

• N/A

[hshoff]

Thanks for this @manuelrocha88. I want to take some time to understand the problem a bit more before I merge this. First thought is it makes sense. Just want to be safe and make sure I fully grasp why this is a win for everyone 😄

[manuelrocha88]

@hshoff I give you a shortcut on the issue analysis.

From @vx/tooltip package if we make only use of the Tooltip component we get something like this:

As you can see the tooltip gets out of the chart bounds and get cut.

If we replace the Tooltip component by the TooltipWithBounds, we get a different, and success, reposition of the Tooltip and it's inside the chart bounds, as we can see at this picture:

But, this TooltipWithBounds package is only considering the chart bounds. What If the chart has part of it outside of the bounds of the frame screen (A small screen?!)?

You get something like this:

If you see the bubble is half visible only. When I make my mouse over it the Tooltip gets cut because is still inside chart bounds but outside frame screen bounds.

With the change I have on PR you will get something like this:

As you can check the Tooltip now is inside the bounds of chart and frame screen.

[hshoff]

Sounds good