sl-tooltip and AOS compatibility issue

[b-d-m-p]

Hi, I have an issue on my website where a div that I have AOS set to fade a div in on scroll and it has some shoelace buttons inside with shoelace tooltips on them.

For some reason, the tooltips don't show if the div is set to use AOS to fade in on scroll. I tried to recreate it in a codepen, but I can't reproduce the issue. In the demo the tooltips appear fine, so there might be something else different in my setup in addition that is causing it.

I'm using Astro and there's a couple of nested components in there. So I need to do more work to figure out what difference might be causing the issue, but I just thought I would ask to see if anyone knows what it might be. Thanks.

https://codepen.io/b-d-m-p/pen/XWvXEqb

[claviska]

This happens because AOS is applying a transform that messes with the tooltip's default positioning strategy. You can use <sl-tooltip hoist> to change it to a fixed positioning strategy instead.

In the future, we'll be moving to the Popover API which uses top-layer to avoid problems like this. Hopefully the hoist attribute will work for you in the meantime.