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"> <script lang="ts">
import { Tooltip as TooltipPrimitive } from "bits-ui"; import { Tooltip as TooltipPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js"; import { cn } from "$lib/utils.js";
import { browser } from '$app/environment';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -15,33 +16,35 @@
} = $props(); } = $props();
</script> </script>
<TooltipPrimitive.Portal> {#if browser}
<TooltipPrimitive.Content <TooltipPrimitive.Portal>
bind:ref <TooltipPrimitive.Content
data-slot="tooltip-content" bind:ref
{sideOffset} data-slot="tooltip-content"
{side} {sideOffset}
class={cn( {side}
"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", class={cn(
className "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} )}
> {...restProps}
{@render children?.()} >
<TooltipPrimitive.Arrow> {@render children?.()}
{#snippet child({ props })} <TooltipPrimitive.Arrow>
<div {#snippet child({ props })}
class={cn( <div
"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]", class={cn(
side === "top" && "translate-x-1/2 translate-y-[calc(-50%_+_2px)]", "bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
side === "bottom" && "-translate-x-1/2 -translate-y-[calc(-50%_+_1px)]", side === "top" && "translate-x-1/2 translate-y-[calc(-50%_+_2px)]",
side === "right" && "translate-x-[calc(50%_+_2px)] translate-y-1/2", side === "bottom" && "-translate-x-1/2 -translate-y-[calc(-50%_+_1px)]",
side === "left" && "-translate-y-[calc(50%_-_3px)]", side === "right" && "translate-x-[calc(50%_+_2px)] translate-y-1/2",
arrowClasses side === "left" && "-translate-y-[calc(50%_-_3px)]",
)} arrowClasses
{...props} )}
></div> {...props}
{/snippet} ></div>
</TooltipPrimitive.Arrow> {/snippet}
</TooltipPrimitive.Content> </TooltipPrimitive.Arrow>
</TooltipPrimitive.Portal> </TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
{/if}

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

@ -1,7 +1,21 @@
<script lang="ts"> <script lang="ts">
import { Tooltip as TooltipPrimitive } from "bits-ui"; 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> </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}