src/lib/components/Tooltip.svelte

<script lang="ts">
	import { buttonVariants } from '$lib/components/ui/button/index.js';
	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
	import type { Snippet } from 'svelte';

	type Props = {
		content: Snippet;
		children: Snippet;
		triggerClass?: string;
		contentClass?: string;
	};

	let {
		children,
		content,
		triggerClass = buttonVariants({ variant: 'outline' }),
		contentClass
	}: Props = $props();
</script>

<Tooltip.Provider>
	<Tooltip.Root>
		<Tooltip.Trigger class={triggerClass}>{@render children()}</Tooltip.Trigger>
		<Tooltip.Content class={contentClass}>
			{@render content()}
		</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>