[Bug]: Tooltip and DefinitionTooltips don't work well in tables with sticky headers

[valente]

Package

@carbon/react

Browser

Chrome

Package version

1.35.0

React version

18.2.0

Description

TooltipDefinition & Tooltips break tables with sticky elements, making the trigger elements fly over sticked headers.

Reproduction/example

https://stackblitz.com/edit/github-737hdm-zg2ygf

Steps to reproduce

horizontally scroll the table

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

[tay1orjones]

@valente Thanks for reporting and providing the stackblitz, though I don't see stickyHeader being used there. I forked yours and put it on there: https://stackblitz.com/edit/github-737hdm-n4rzbo?file=src%2FApp.jsx

stickyHeader is still considered experimental and we admittedly haven't tested this combination. I can see how it would be beneficial to describe columns though. It may be possible to work around this by applying custom styles to force a new stacking context and modifying the z-index.

We've been considering a much more comprehensive fix for issues like this in #14139.

[valente]

First, updates from my side: I found a workaround by adding a zindex declaration to the sticky column. Not sure why this works but it seems to "revert" the effect of adding the tooltip.

About your response: this report was about a sticky column, not a sticky row. I think you referred to a sticky row/header.

Thank you for sharing the existence of a more comprehensive solution. I'm happy to see that, since I also continously face popover/tooltips issues in carbon-react.

In short, I consider this worked-around on my side, but I'm not sure this issue should be closed. Not sure adding a tooltip should have had this effect in the first place.

[valente]

Here's a fork with the fix https://stackblitz.com/edit/github-737hdm-mcucbi?file=src%2Findex.scss

[tay1orjones]

@valente thanks for the additional information and the workaround. I agree we should ensure tooltips are compatible within position:sticky td/th elements, though this probably falls lower on our priority list.

[guidari]

Fixed in #14493
Here it is an working example in Stackblitz. The only thing to be aware of is the content inside the td with the position: sticky. The content overflows the DefinitionTooltip. With a few changes in the CSS you might fixed.