Avatar z-index bug

[sssilver]

Current Behavior

Avatars currently pop in front of tooltips inside other, unrelated containers for some reason.

None of the z-indices of any elements in the screenshot have been manually overridden.

Expected Behavior

Avatar components z-index acts like any other component

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

"@skeletonlabs/skeleton": "^3.0.0-next.9",
"@skeletonlabs/skeleton-svelte": "^1.0.0-next.14",

Tooltip:

<Tooltip
	positioning={{ placement: 'right' }}
	contentBase="card preset-filled p-4"
	openDelay={0}
	closeDelay={0}
	triggerClasses="block"
>
	{#snippet trigger()}
		<Navigation.Tile id="0" labelExpanded="School" href="administration">
			<IconAdministration size="36" />
		</Navigation.Tile>
	{/snippet}
	{#snippet content()}School Administration{/snippet}
</Tooltip>

Avatar:

<button
	type="button"
	class="
    card
    border-surface-200-800
    border-[1px]
    w-full
    p-2 flex
    items-center
    gap-4
    hover:brightness-150
    {isSelected ? 'bg-red-800' : ''}
"
	onclick={() => onSelect(student)}
>
	<Avatar size="size-12" src="https://i.pravatar.cc/?u={student.id}" name={student.name} />

	{student.name}
</button>

[endigo9740]

@sssilver we're in a transitory time were folks are actively using Skeleton v2 and the v3 beta. Can you please share which of these you're reporting this for so I can flag it appropriately please.

That said, Avatars shouldn't have a z-index set by default. Are you by chance using Floating UI, the v2 Popup feature, or the v3 Popover features? All of these utilize Floating UI which does not take an opinionated stance on the z-index:
https://floating-ui.com/docs/misc#z-index-stacking

This could be related to that, and a quick fix would be to set a z-index on your popover. Z-index fighting can happen for odd reasons sometimes. For example, if you use the backdrop blur feature in Chrome, that feature will take precedence over popovers.

Just want to help correctly diagnose this for you.

[sssilver]

Sorry about that, updated the post to add the package versions

[endigo9740]

Thanks for the clarification @sssilver. So the Tooltip is one of those v3 Popover features I was mentioning. It's implemented using Zag.js, but under the hood they use Floating UI. So the z-index issue I mentioned above is still relevant - this may need to be user-defined.

That said, I've noted we currently don't provide props for users to provide classes to the "position" element - which Floating UI uses - so this isn't easily addressable on your end yet:
https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte#L54

I'll leave this ticket open to research and address this. But I'd expect we'll add a set of props for this element like positionerClasses or positionerZIndex or similar that lets you pass a z-index utility class. Then that should ensure it resides on a layer above.

Still not sure what about the avatar trips it up, but again that's how these things go some times.

[endigo9740]

@sssilver as at least a temporary fix, I might suggest adding something like this to your global stylesheet to see if it helps:

[data-scope="tooltip"] { @apply z-10; }

NOTE: vanilla CSS is fine too!

But this should specify a z-index for any Tooltip popover instance. See if that helps!

[sssilver]

[data-scope="tooltip"] { @apply z-10; }

This did help 🤘

[endigo9740]

@sssilver FYI per #3029 we will be updated all four Svelte-specific Popover components to implement a new set of positionerX style props. One of these will be positionerZIndex, which will be empty by default to match Floating UI's non-opinionated approach. This should enable you a direct way to set Z-index per component instance. Additionally the global style approach above will remain viable if you prefer that.

This will drop as part of the next release in about 2 weeks from today.