yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix tooltip ssr errors

Browse source
This commit is contained in:
Face 2025-06-28 17:37:23 +03:00
parent 107c78a5f2
commit 098db9f69a
2 changed files with 49 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

63
website/src/lib/components/ui/tooltip/tooltip-content.svelte
View file

@ -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}

18
website/src/lib/components/ui/tooltip/tooltip-trigger.svelte
View file

@ -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}