Help me understand z-index and sl-tooltip

[saeldion]

Hi,

I'm having trouble using sl-tooltip in my existing project and I believe it is due to me not properly understanding z-indexes.
I thought I understood how z-indexes worked prior to this, but apparently not 😅

I'm working on a page which relies heavily on sticky behaviour. It it basically a large table (css-grid) with sticky headers (both when scrolling in X and Y) for different groups of data. These groups can have sub-groups as well. Because of some requirements some of these headers (and rows) have elements with position: relative; so that we can position things in for example to top right corner of elements with absolute positioning.

The problem is that settings elements as relative, to position absolutely, makes the elements that are supposed to be below the ones above instead go on top. To counteract this I use descending z-indexes from the top to the bottom so that the rows go below the above elements. This works and has worked for some time. But now we are working on replacing our old bootstrap tooltips with sl-tooltip. The problem is that the tooltips goes underneath the above elements (even with hoist) and I have no idea how to solve it...

I have thrown together a very simplified example which shows the problem I'm having: https://codepen.io/Saeldion/pen/LYoPGYx
The window needs to be resized so that scrollbars appears to see the issue.

The envelopes all have tooltips on them which ideally should be visible when hovered over.
In the CSS I've specified all z-indexes so that they can easily be disabled to show the behaviour we are trying to avoid with out solution.

Even with hoist (fixed positioning) the tooltip doesn't seem to fully exit its stacking context. Is there a way around this?

Is there any way we can get sl-tooltip to work in our current setup? Or do any of you have a suggestion on how we could change our HTML and CSS to work better and not need z-indexes?

Thanks in advance for any help or insight anyone can provide!

[claviska]

We're reworking tooltip to not wrap their anchors for 3.0 to make this easier. In the future, you'll be able to place the tooltip anywhere in the document. For now, disabling this rule makes the tooltip appear over the gray area, which I think it what you want.

The problem is that the cells have position: relative and a z-index of their own, which creates a new stacking context. Thus, setting a z-index on the tooltip itself won't really help.

[saeldion]

We're reworking tooltip to not wrap their anchors for 3.0 to make this easier.

That is music to my ears! Looking forward to it!

Yeah that seems to work. Thanks. We have other cases (that I didn't recreate in the example) where that solution does not help because of other restraints. But we will just have to work around them for now or keep bootstrap in those places until 3.0.

Thanks for the help!

Edit: I added a tooltip to the "Row head" element, because that is a common case for us. That can not be solved with removing the z-index because of position: relative messing up .cell stacking context. Am I right?