Floating UI: Document examples of when autoAlign doesn't work

[tay1orjones]

The floating-ui library powers the collision detection behind the autoAlign prop that is available on multiple components. It uses a position: fixed strategy, which for the majority of cases should ensure floating elements are not clipped by ancestor elements. The floating-ui docs state this approach does not work in 100% of cases.

This issue is for collecting examples of when autoAlign does not successfully position floating elements as we would expect.

If you have an example, please comment below and include:

1. Describe the issue
2. Include a screenshot
3. Provide a stackblitz example using our starter template

[embrown-ibm]

In my application, I added the autoAlign prop to an IconButton component which appears within a table cell. In my illustrated scenario, the table only has 2 rows and the tooltip area has a height greater than 2 rows (data or header). Thus, you can see that the top row of text within the tooltip is clipped. The line of text that is cut off is Common Name=MB

In this second example, there are 3 or 4 lines of text that get clipped from the tooltip. It seems the tooltip is restricted to the table headers and table body but gets clipped by the toolbar.

[riddhybansal]

Hey I got an issue in menuButton

Screen.Recording.2024-07-30.at.4.30.57.PM.mov

I guess this is related to collision boundary. Menu getting detached from menuButton and clipping the modal

[crhuff-ibm]

When we have a ToggleTip within a DataTable we get this behavior

[ljcarot]

AutoAlign is not working correctly with AI Popover per report from Sean Stuckless https://react.carbondesignsystem.com/iframe.html?args=&id=components-ailabel--playground&viewMode=story
cc: @tay1orjones @sstrubberg

[tay1orjones]

Thanks @ljcarot, I've opened #17571 and included in this sprint