[Bug]: tooltips render under icons

[alisonjoseph]

Package

@carbon/styles

Browser

No response

Package version

?

React version

No response

Description

Reported in slack https://ibm-studios.slack.com/archives/C0M053VPT/p1687360867441669

We’re having a weird layering issue where tooltips are appearing under icons that are in a data table.

Two issues in the example:
tooltip text can only displayed in one line.
icon in table header displayed over tooltip for action button

workaround is to add a z-index to .cds--batch-action

Reproduction/example

https://codesandbox.io/p/sandbox/optimistic-river-sd3q2p?file=%2Fsrc%2Fapp%2Fapp.component.html%3A28%2C59

Steps to reproduce

See codesandbox

Suggested Severity

Severity 3 = User can complete task, and/or has a 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]

We could revise the styling for the batch action bar to set a higher z-index than what it gets currently. or update the styling for the batch action bar so that it creates a new stacking context to ensure it renders above the datatable elements later in the dom

On a larger scale, this contributes to the list of reasons why we need to consider revising how we render and place tooltips, #14139

[bianca-c-melo]

I'm facing the same issue where the popover doesn't overlay other elements. I've tried modifying the existing z-index values, but I haven't any success. The only thing that worked was changing the overflow property of the modal body to "visible", but it's not an ideal solution. Is there any workaround to solve this problem for now?

[alisonjoseph]

This bug was also reported via slack and this example, where toggle is showing up above popover. Fixed by adding a z-index to the toolbar.

https://codesandbox.io/s/stupefied-marco-5xgt2d?file=/index.js