Fix tooltips hidden behind sticky position table cells

Question

I am creating a product features table and it is too wide, so we have made the first column fixed with remaining columns scrolling left/right. My problem is that the tooltips are coming beneath and hidden by the sticky cell in the next row.

Here is the test table

I have tried everything I can think of with z-index and can't find a way to fix it.

Is this possible or do I need to try something completely different?

Answer 1

Each td having position: sticky is creating its own stacking context in conflict with each other. To make sure that the td holding the tooltip will stay on top of the other td laying on the row below, set its z-index higher.

So, for example, just adding this css rule, will solve the issue:

tr.row-14 > td:first-child {
    z-index: 100;
}