Fix: Tooltip z-index was not working with an arrow (#3562)

NikitaZelenskis · web-flow · commit 9769b908cbae · 2025-05-30T12:05:51.000-05:00
diff --git a/.changeset/icy-insects-throw.md b/.changeset/icy-insects-throw.md
@@ -0,0 +1,6 @@
+---
+"@skeletonlabs/skeleton-svelte": patch
+---
+
+Bugfix: z-index of tooltip was not working when an arrow element was present.
+  
diff --git a/packages/skeleton-svelte/src/components/Tooltip/Tooltip.svelte b/packages/skeleton-svelte/src/components/Tooltip/Tooltip.svelte
@@ -55,20 +55,23 @@
 		</button>
 	{/if}
 	<!-- Tooltip Content -->
-	{#if api.open}
-		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{positionerBase} {positionerClasses}">
-			<!-- Arrow -->
-			{#if arrow}
-				<div {...api.getArrowProps()}>
-					<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
+	<div {...api.getPositionerProps()} class="{positionerBase} {positionerClasses}">
+		<!-- Popover -->
+		{#if api.open}
+			<div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
+				<!-- Arrow -->
+				{#if arrow}
+					<div {...api.getArrowProps()}>
+						<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
+					</div>
+				{/if}
+				<!-- Snippet Content -->
+				<div class="{contentBase} {contentBackground} {contentClasses}">
+					{@render content?.()}
 				</div>
-			{/if}
-			<!-- Snippet Content -->
-			<div {...api.getContentProps()} class="{contentBase} {contentBackground} {contentClasses}" style="z-index: {zIndex};">
-				{@render content?.()}
 			</div>
-		</div>
-	{/if}
+		{/if}
+	</div>
 </span>
 
 <style>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +---
 +"@skeletonlabs/skeleton-svelte": patch
 +---
++
 +Bugfix: z-index of tooltip was not working when an arrow element was present.
++