[Bug]: Button tooltips does not show up in the TreeNode component

[TarcanGul]

Package

@carbon/react, @carbon/styles, @carbon/icons-react

Browser

Firefox

Package version

v1.70.0

React version

v18.3.1

Description

Hello! In my application, I am using the TreeView component and I have added buttons to the TreeView by using the fact that label prop can take a component. When I put buttons this way and add tooltips with the up position, I was expecting the tooltips to appear on top of the buttons but it seems to be not visible.

I thought this was a z-index issue because I could see the very bottom of the tooltip, but trying to override z-index did not work for me.

Here is the code that is similar to what I am doing:

<Button size='sm' 
    renderIcon={Add}
    title='My tooltip'
    iconDescription='My tooltip'
    hasIconOnly 
    tooltipPosition='up'
    kind="ghost" 
    onClick={toggleAddModalOpen}>
</Button>

When I align up, this is how it looks like:

When I align the tooltip to left (so only change align to left), the tooltip is visible.

Note: I am also aware that <Tooltip> can be also used instead of having iconDescription and tooltipPosition in the button, but I also could not get around this issue.

Reproduction/example

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

Steps to reproduce

Create a TreeView and TreeNode. For the TreeNode, we will be rendering another component in the label prop:

TreeNode:

    <TreeNode label={<YourCustomComponent />} >
        <p> Not important </p>
    </TreeNode>

Make sure the custom component returns this type of structure:

    <div>
        <span>{topic}</span>
        <div className='buttons'>
            <Button size='sm' 
                renderIcon={Add}
                title={`My tooltip`}
                iconDescription={`My tooltip`}
                hasIconOnly 
                tooltipPosition='up'
                kind="ghost" 
                onClick={toggleAddModalOpen}>
            </Button>
        </div>
    </div>

For buttons, just do

.buttons {
   position: absolute;
   right: 0;
}

Make sure the parent has position: relative.

With this setup, you should be seeing the similar issue with tooltip not appearing if it is aligned up and down, but it will show up when it is aligned to left. In another words, the tooltip seems to just truncate if the parent container is overflown but it would be nice to be able to change the z-index of the tooltip so it can show up in the page no matter where the tooltip is contained in.

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