diff --git a/src/lib/components/tooltip/tooltip.svelte b/src/lib/components/tooltip/tooltip.svelte
new file mode 100644
index 00000000..360c8da0
--- /dev/null
+++ b/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 { Info, type Icon } from 'lucide-svelte';
+
+	interface Props {
+		content: string;
+		children?: Snippet;
+		icon?: typeof Icon;
+		fadeDuration?: number;
+		openDelay?: number;
+		closeDelay?: number;
+	}
+
+	const {
+		content,
+		children,
+		icon = Info,
+		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}
diff --git a/src/routes/[network]/(dev)/debug/components/+page.svelte b/src/routes/[network]/(dev)/debug/components/+page.svelte
index bbe7105a..4a7c3a94 100644
--- a/src/routes/[network]/(dev)/debug/components/+page.svelte
+++ b/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>
diff --git a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
new file mode 100644
index 00000000..1cf4de39
--- /dev/null
+++ b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { ShieldQuestion, 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>
+		<Tooltip content="Another tooltip example">
+			<span class="cursor-help underline">Small tooltip</span>
+		</Tooltip>
+	</div>
+
+	<div>
+		<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>
+		<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>
+		<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={ShieldQuestion}
+		>
+			<span class="cursor-help underline">Tooltip with custom icon</span>
+		</Tooltip>
+	</div>
+
+	<div>
+		<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>
+		<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>
+
+	<div>
+		<Tooltip content="This tooltip is on an icon.">
+			<span class="inline-block cursor-help">
+				<Info />
+			</span>
+		</Tooltip>
+	</div>
+</Stack>