[Bug]: Tooltips are clipped in Table component

[Akshat55]

Package

@carbon/react, @carbon/styles

Browser

Chrome, Firefox

Package version

v1.35.0

React version

v18.2.0

Description

Tooltips no longer works with Table component. In v10, tootips were appended to the end of the body and would appear on top of tooltip trigger. In v11, tooltips are inline and the overflow is clipped in some components.

I've tried playing around with the overflow of the table (overflow: visible), the tooltip is displayed over the table, but that raises issues with horizontal scrolling in table... so it isn't an optimal solution.

---

Here is a v11, stackblitz demo of this scenario: https://stackblitz.com/edit/github-2hzyl1?file=src%2FApp.jsx

If you hover over the icon, you will see that the tooltip content is hidden horizontally and requires vertical scrolling:

Here is the same scenario in v10: https://codesandbox.io/s/hungry-benz-8ny8qm?file=/src/index.js

If you hover over the icons, the tooltip is correctly shown above the table since it's appended to body.

Reproduction/example

https://stackblitz.com/edit/github-2hzyl1?file=src%2FApp.jsx

Steps to reproduce

1. Create a table
2. Add Tooltip as a child in TableCell component.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Hi @Akshat55, thanks for reporting this. Variants of this problem were present in v10 as well and some workarounds are outlined in #6728.

We can't append these to the body via a portal because it fails SC 1.3.2: meaningful sequence. A more robust solution is needed such as what's been proposed in #14139. No decision there yet though.

[tay1orjones]

Duplicate of #6728