[Bug]: The Toggletip component truncates when it is inside a data table

[Sebastian-Ribeiro]

Package

@carbon/react

Browser

No response

Package version

v1.33.2

React version

v17.0.2

Description

When a toggletip is added to a data table component as it is added inside the table in the dom, the toggletip component gets truncated by the header of the data table. It would be nice to have a prop to decide in which part of the dom do we want the toggletip to be added.

Reproduction/example

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

Steps to reproduce

1. Create a Data table with a toggletip component in one of the cells
2. Click on the toggletip and see the tooltip gets truncated

Suggested Severity

None

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

[tw15egan]

Related: #14139

[kurtwaldowski-b]

This feels like an issue with how the tooltip is implemented at its core; other UI libraries will generally used fixed positioning and or insert a dom element at the top of the dom and use translates to properly position the tooltip. Any time the tooltip is within a container that is not at the top of the dom, these risk getting cut off when generally tooltips should always be on top of other elements no matter how nested the element its wrapped around is within the dom.

[nikku]

How is this waiting for authors response (looking at the assigned GitHub label)? I assume this is a simple, clearly qualified bug report.

The current implementation of Carbon Tooltips, as indicated earlier makes it impossible to use them in a robust manner inside scrollable containers (such as data table), due to positioning and overflow interplay in browsers. A robust implementation uses fixed positioning for tooltips, and/or makes them live outside of the overflow: auto scrollable container.

As my team is currently investigating options for working around this issue, could we get a quick update from the team: Is this something that you plan to address, and if so, do you have a rough timeline?