[Bug]: Tooltips placed in the ContainedList header are hidden by other list headers.

[danielkim10]

Package

@carbon/react

Browser

Chrome

Package version

v1.70.0

React version

v18.2.0

Description

I have multiple ContainedList components, with each list header containing a label and an icon with tooltip. When I hover over an icon to view a tooltip, if the tooltip label is long enough, it will be covered by the ContainedList header components underneath it.

Reproduction/example

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

Steps to reproduce

In the Stackblitz, hover over each icon and observe how the tooltip behaves.

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Current Workaround

I applied the following CSS properties to the ContainedList header:

.cds--contained-list__header {
  position: relative;
  z-index: initial;
}

This ended up working for my intended use case, resulting in the tooltips no longer being covered. However, I have not fully investigated the effects of these changes.

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