From 098db9f69a775a80a6e76d5d934002bdc01ab901 Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sat, 28 Jun 2025 17:37:23 +0300
Subject: [PATCH] fix tooltip ssr errors

---
 .../ui/tooltip/tooltip-content.svelte         | 63 ++++++++++---------
 .../ui/tooltip/tooltip-trigger.svelte         | 18 +++++-
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/website/src/lib/components/ui/tooltip/tooltip-content.svelte b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
index a279295..a6e87a7 100644
--- a/website/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import { browser } from '$app/environment';
 
 	let {
 		ref = $bindable(null),
@@ -15,33 +16,35 @@
 	} = $props();
 </script>
 
-<TooltipPrimitive.Portal>
-	<TooltipPrimitive.Content
-		bind:ref
-		data-slot="tooltip-content"
-		{sideOffset}
-		{side}
-		class={cn(
-			"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
-			className
-		)}
-		{...restProps}
-	>
-		{@render children?.()}
-		<TooltipPrimitive.Arrow>
-			{#snippet child({ props })}
-				<div
-					class={cn(
-						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
-						side === "top" && "translate-x-1/2 translate-y-[calc(-50%_+_2px)]",
-						side === "bottom" && "-translate-x-1/2 -translate-y-[calc(-50%_+_1px)]",
-						side === "right" && "translate-x-[calc(50%_+_2px)] translate-y-1/2",
-						side === "left" && "-translate-y-[calc(50%_-_3px)]",
-						arrowClasses
-					)}
-					{...props}
-				></div>
-			{/snippet}
-		</TooltipPrimitive.Arrow>
-	</TooltipPrimitive.Content>
-</TooltipPrimitive.Portal>
+{#if browser}
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			bind:ref
+			data-slot="tooltip-content"
+			{sideOffset}
+			{side}
+			class={cn(
+				"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+				className
+			)}
+			{...restProps}
+		>
+			{@render children?.()}
+			<TooltipPrimitive.Arrow>
+				{#snippet child({ props })}
+					<div
+						class={cn(
+							"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+							side === "top" && "translate-x-1/2 translate-y-[calc(-50%_+_2px)]",
+							side === "bottom" && "-translate-x-1/2 -translate-y-[calc(-50%_+_1px)]",
+							side === "right" && "translate-x-[calc(50%_+_2px)] translate-y-1/2",
+							side === "left" && "-translate-y-[calc(50%_-_3px)]",
+							arrowClasses
+						)}
+						{...props}
+					></div>
+				{/snippet}
+			</TooltipPrimitive.Arrow>
+		</TooltipPrimitive.Content>
+	</TooltipPrimitive.Portal>
+{/if}
diff --git a/website/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/website/src/lib/components/ui/tooltip/tooltip-trigger.svelte
index 1acdaa4..0698229 100644
--- a/website/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ b/website/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -1,7 +1,21 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { browser } from '$app/environment';
 
-	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+	let { ref = $bindable(null), disabled = false, ...restProps }: TooltipPrimitive.TriggerProps = $props();
 </script>
 
-<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
+{#if browser}
+	<TooltipPrimitive.Trigger bind:ref {disabled} data-slot="tooltip-trigger" {...restProps} />
+{:else}
+	<!-- SSR fallback -->
+	<div
+		bind:this={ref}
+		data-slot="tooltip-trigger"
+		{...Object.fromEntries(
+			Object.entries(restProps).filter(
+				([key]) => !key.startsWith('on:') // Remove Svelte event handlers
+			)
+		)}
+	></div>
+{/if}