Tooltip

<script lang="ts">
	import { fly } from 'svelte/transition';
	import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from 'lithesome';
	import { Button } from '$site/index.js';
</script>

<Tooltip
	floatingConfig={{
		offset: 15,
		placement: 'top'
	}}
>
	<TooltipTrigger>
		{#snippet custom({ props })}
			<Button variant="primary" {...props}>Hover me</Button>
		{/snippet}
	</TooltipTrigger>

	<TooltipContent>
		{#snippet custom({ props, state })}
			{#if state.visible}
				<div
					transition:fly={{ duration: 150, y: 5 }}
					{...props}
					class="rounded-md bg-white px-3 py-1.5 text-sm text-black shadow-md dark:bg-zinc-800 dark:text-white"
				>
					<TooltipArrow class="size-3 rotate-45 bg-white dark:bg-zinc-800" />
					Howdy!
				</div>
			{/if}
		{/snippet}
	</TooltipContent>
</Tooltip>