API surface for Tooltip/Callout doesn't allow proper position of beak even with DirectionalHint.bottomLeftEdge

[cliffkoh]

Environment Information

• Package version(s): 6.138
• Browser and OS versions: all browsers/os

Please provide a reproduction of the bug in a codepen:

https://codepen.io/cliffkoh/pen/OdEqNE?editors=0010

Actual behavior:

Expected behavior:

[JasonGore]

This is a feature request regarding beak position in certain scenarios where the beak's positioning doesn't particularly align with the target. This CodePen highlights the ask a bit more clearly with a list of Checkboxes with varying content width:

This seems to be exacerbated by the amount of Tooltip content, which appears to push the beak even further out:

[cliffkoh]

Thanks, very good illustration of the existing limitations.

[JasonGore]

One potential solution is providing an optional target id for either the callout or the beak.

[JasonGore]

This Codepen offers a couple of fixes making use of Callout's target prop while this issue is investigated.

[brandonthomas]

Sort of tangential to this, I'm not able to get the beak to slide in the way that I want when I override the width of a Callout when using TeachingBubble. Here I have tried setting width and max width both through CalloutProps and through styles and get the same result. Note that the directional hint is BottomLeftEdge so I'd expect the beak to by on the left side of the callout with the callout slid over to the right a bit.

without width props or styles (or any combination thereof) you'll note that the beak is in the same spot:

I'm also pretty sure calloutWidth and calloutMaxWidth are no-op on TeachingBubble.

[brandonthomas]

I've worked around this with negative margins...so...gross but works.

[brandonthomas]

Actually that work around isn't stable. If the positional css rules are in certain places margins can cause the beak to visually disconnect. So that's not a great solution either.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.