Tooltip: OverlayArrow placed too far on the edges

[thorbde]

Provide a general summary of the issue here

🤔 Expected Behavior?

The OverlayArrow shouldn't go too far to the edges of the tooltip.

😯 Current Behavior

The OverlayArrow goes all the way to the edge when the trigger is wider than double the width of the tooltip. This is an issue when there's border radius applied to the tooltip. The positioning is set internally, not sure if it's from the TooltipTrigger or the Tooltip.

💁 Possible Solution

Could you provide a prop to clamp the positioning of the OverlayArrow, so that it does not go further to the edge than allowed?

🔦 Context

No response

🖥️ Steps to Reproduce

1. Go to your storybook example, with placement: top right
2. Set the width of the trigger/button to a width wider than double the width of the tooltip (100px for example).

Version

1.1.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Macos Sonoma

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I think we'll need to expose the OverlayArrowContext. Trying to set the style prop directly on OverlayArrow doesn't allow you to make a calculation based on the value we provide, and we can't prevent the arrow from doing what it's doing because the tip can be an arbitrary size that only you know as well as the border radius.

It's either that, or we'd need to add a prop to OverlayArrow which would allow you to specify the buffer zone width.

[thorbde]

@snowystinger Is there anything I can do to help here? There's an open PR that seems to address the issue

[snowystinger]

We will be giving that PR an API review soon, we just haven't had time yet. We'll update on there when we do. Thanks for the offer.