Tooltips obscured when used within a Tree

[snelgrove]

Describe the bug

Tooltips seem to be obscured by other Shoelace controls, when used within a Shoelace Tree.

If the "obscuring" control is disabled, a transparency effect occurs instead.

To Reproduce

Steps to reproduce the behavior:

1. Create a tooltip within an sl-tree-item
2. Place another Shoelace control outside of the tree, but close enough that the tooltip would hover over it
3. Open the tooltip by hovering over the Tree Item (or by setting the open attribute)
4. The tooltip is obscured by the other control

Demo

Try disabling the sl-input to see the transparency affect.

Browser / OS

• OS: Mac
• Browser: Chrome 119/Safari 16.6

Additional information

• I've tried with and without hoisting the tooltip, but it doesn't seem to help

[claviska]

CodePen repro added since CodeSandbox won't let me edit it for some reason:

https://codepen.io/claviska/pen/wvNJyyN?editors=1010

[claviska]

I've investigated this further and I've found two issues. First, the tooltip's target is a text node in the repro, but it should be an HTML element. This is mentioned in the docs, but maybe it should be more prominent.

This solve the position of the tooltip and the arrow, but it still shows behind the input. It looks like that's caused by this line of the tree's stylesheet.

shoelace/src/components/tree/tree.styles.ts

Line 19 in dd483c0

isolation: isolate;

I'm not sure why that's there, so I want to check with @alenaksu before we remove it. In the meantime, you can add the following property to revert it so the tooltip shows up as expected.

<sl-tree style="isolation: auto;">

@alenaksu — do you recall the purpose of the isolation property in <sl-tree>?

[alenaksu]

@claviska, unfortunately, I don't remember exactly why it was added, but I don't think it's really needed. I can take a better look though.