fix tooltip ssr errors

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

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,7 +16,8 @@
} = $props();
</script>
<TooltipPrimitive.Portal>
{#if browser}
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
bind:ref
data-slot="tooltip-content"
@ -44,4 +46,5 @@
{/snippet}
</TooltipPrimitive.Arrow>
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
</TooltipPrimitive.Portal>
{/if}

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}