gpx.studio/website/src/lib/components/Tooltip.svelte

<script lang="ts">
    import * as Tooltip from '$lib/components/ui/tooltip/index.js';

    export let label: string;
    export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
</script>

<Tooltip.Provider>
    <Tooltip.Root>
        <Tooltip.Trigger {...$$restProps} aria-label={label}>
            <slot />
        </Tooltip.Trigger>
        <Tooltip.Content {side}>
            <div class="flex flex-row items-center">
                <span>{label}</span>
                <slot name="extra" />
            </div>
        </Tooltip.Content>
    </Tooltip.Root>
</Tooltip.Provider>