Tooltip component

src/lib/components/tooltip/tooltip.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { createTooltip, melt } from '@melt-ui/svelte';
+	import { fade } from 'svelte/transition';
+	import { type Snippet } from 'svelte';
+	import type { Icon } from 'lucide-svelte';
+
+	interface Props {
+		content: string;
+		children?: Snippet;
+		icon?: typeof Icon;
+		fadeDuration?: number;
+		openDelay?: number;
+		closeDelay?: number;
+	}
+
+	const {
+		content,
+		children,
+		icon,
+		fadeDuration = 50,
+		openDelay = 300,
+		closeDelay = 300
+	}: Props = $props();
+
+	const {
+		elements: { trigger, content: tooltipContent },
+		states: { open }
+	} = createTooltip({
+		openDelay,
+		closeDelay
+	});
+</script>
+
+<span use:melt={$trigger}>
+	{#if children}
+		{@render children()}
+	{/if}
+</span>
+
+{#if $open}
+	<div
+		use:melt={$tooltipContent}
+		transition:fade={{ duration: fadeDuration }}
+		class="z-50 flex max-w-xs items-center rounded-md border border-neutral-700 bg-neutral-800 px-4 py-3 text-sm text-white shadow-md"
+	>
+		{#if icon}
+			{@const IconComponent = icon}
+
+			<span class="mr-3">
+				<IconComponent size={18} />
+			</span>
+		{/if}
+		<span>{content}</span>
+	</div>
+{/if}

src/routes/[network]/(dev)/debug/components/+page.svelte

@@ -11,11 +11,12 @@
 	import Progress from './sections/progress.svelte';
 	import Tables from './sections/tables.svelte';
 	import Charts from './sections/charts.svelte';
+	import Tooltips from './sections/tooltips.svelte';
 </script>
 
 <h1 class="h1 mb-8">Design System</h1>
 
-<Stack class="space-y-12">
+<Stack class="space-y-12 pb-12">
 	<Typography />
 
 	<hr class="my-8 h-px border-0 bg-slate-200 dark:bg-slate-800" />
@@ -57,4 +58,8 @@
 	<hr class="my-8 h-px border-0 bg-slate-200 dark:bg-slate-800" />
 
 	<Layouts />
+
+	<hr class="my-8 h-px border-0 bg-slate-200 dark:bg-slate-800" />
+
+	<Tooltips />
 </Stack>

src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Info } from 'lucide-svelte';
+	import { Stack } from '$lib/components/layout';
+	import Tooltip from '$lib/components/tooltip/tooltip.svelte';
+</script>
+
+<Stack id="tooltips" class="space-y-8">
+	<div>
+		<h2 class="h2 mb-4">Tooltips</h2>
+		<p>Tooltips provide additional information when hovering over an element.</p>
+	</div>
+
+	<div class="flex items-center space-x-4">
+		<Tooltip content="Another tooltip example">
+			<span class="cursor-help underline">Small tooltip</span>
+		</Tooltip>
+	</div>
+
+	<div class="flex items-center space-x-4">
+		<Tooltip
+			content="This is a medium-length tooltip that provides more detailed information about a feature or concept."
+		>
+			<span class="cursor-help underline">Medium tooltip</span>
+		</Tooltip>
+	</div>
+
+	<div class="flex items-center space-x-4">
+		<Tooltip
+			content="This is a longer tooltip that can be used to provide comprehensive explanations or instructions. It's useful when you need to convey more complex information without cluttering the main interface. Remember that tooltips should still be concise and to the point."
+		>
+			<span class="cursor-help underline">Large tooltip</span>
+		</Tooltip>
+	</div>
+
+	<div class="flex items-center space-x-4">
+		<Tooltip
+			content="This is a long tooltip with an icon. Icons can be used to provide visual cues about the type of information being presented. For example, this icon might indicate that the tooltip contains important or critical information that the user should pay attention to."
+			icon={Info}
+		>
+			<span class="cursor-help underline">Tooltip with icon</span>
+		</Tooltip>
+	</div>
+
+	<div class="flex items-center space-x-4">
+		<Tooltip
+			content="This tooltip has a longer open and close delay, making it slower to appear and disappear when hovering."
+			openDelay={1000}
+			closeDelay={1000}
+		>
+			<span class="cursor-help underline">Slow open and close tooltip</span>
+		</Tooltip>
+	</div>
+
+	<div class="flex items-center space-x-4">
+		<Tooltip
+			content="This tooltip has a longer fade in duration, making it show up more slowly."
+			fadeDuration={1000}
+		>
+			<span class="cursor-help underline">Slowly appearing tooltip</span>
+		</Tooltip>
+	</div>
+</Stack>