From de5ce3d2a1ece81812fbf0aa80754a7a8921da54 Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Thu, 24 Oct 2024 17:22:12 -0700
Subject: [PATCH 1/4] chore: added Tooltip component

---
 src/lib/components/tooltip/tooltip.svelte     | 46 ++++++++++++++++
 .../(dev)/debug/components/+page.svelte       |  7 ++-
 .../debug/components/sections/tooltips.svelte | 52 +++++++++++++++++++
 3 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/tooltip/tooltip.svelte
 create mode 100644 src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte

diff --git a/src/lib/components/tooltip/tooltip.svelte b/src/lib/components/tooltip/tooltip.svelte
new file mode 100644
index 00000000..2229a848
--- /dev/null
+++ b/src/lib/components/tooltip/tooltip.svelte
@@ -0,0 +1,46 @@
+<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;
+		duration?: number;
+	}
+
+	const { content, children, icon, duration = 50 }: Props = $props();
+
+	const {
+		elements: { trigger, content: tooltipContent },
+		states: { open }
+	} = createTooltip({
+		openDelay: 300,
+		closeDelay: 300
+	});
+</script>
+
+<span use:melt={$trigger}>
+	{#if children}
+		{@render children()}
+	{/if}
+</span>
+
+{#if $open}
+	<div
+		use:melt={$tooltipContent}
+		transition:fade={{ duration }}
+		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..fb22c6bb
--- /dev/null
+++ b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
@@ -0,0 +1,52 @@
+<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 fade in duration, making it show up more slowly."
+			duration={1000}
+		>
+			<span class="cursor-help underline">Slowly appearing tooltip</span>
+		</Tooltip>
+	</div>
+</Stack>

From a5439d21228afb23c7b50bdc9e53c43df83813a8 Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Thu, 24 Oct 2024 17:29:05 -0700
Subject: [PATCH 2/4] enhancement: adding ability to set the open and close
 delay

---
 src/lib/components/tooltip/tooltip.svelte     | 19 ++++++++++++++-----
 .../debug/components/sections/tooltips.svelte | 12 +++++++++++-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/tooltip/tooltip.svelte b/src/lib/components/tooltip/tooltip.svelte
index 2229a848..6082268c 100644
--- a/src/lib/components/tooltip/tooltip.svelte
+++ b/src/lib/components/tooltip/tooltip.svelte
@@ -8,17 +8,26 @@
 		content: string;
 		children?: Snippet;
 		icon?: typeof Icon;
-		duration?: number;
+		fadeDuration?: number;
+		openDelay?: number;
+		closeDelay?: number;
 	}
 
-	const { content, children, icon, duration = 50 }: Props = $props();
+	const {
+		content,
+		children,
+		icon,
+		fadeDuration = 50,
+		openDelay = 300,
+		closeDelay = 300
+	}: Props = $props();
 
 	const {
 		elements: { trigger, content: tooltipContent },
 		states: { open }
 	} = createTooltip({
-		openDelay: 300,
-		closeDelay: 300
+		openDelay,
+		closeDelay
 	});
 </script>
 
@@ -31,7 +40,7 @@
 {#if $open}
 	<div
 		use:melt={$tooltipContent}
-		transition:fade={{ duration }}
+		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}
diff --git a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
index fb22c6bb..bb8b359f 100644
--- a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
+++ b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
@@ -41,10 +41,20 @@
 		</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."
-			duration={1000}
+			fadeDuration={1000}
 		>
 			<span class="cursor-help underline">Slowly appearing tooltip</span>
 		</Tooltip>

From 5ca6d58326b83f7cfd083e6917f3177131a8bcb9 Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Fri, 25 Oct 2024 13:04:32 -0700
Subject: [PATCH 3/4] chore: adding extra tooltip example

---
 .../debug/components/sections/tooltips.svelte | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
index bb8b359f..91001bad 100644
--- a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
+++ b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
@@ -10,13 +10,13 @@
 		<p>Tooltips provide additional information when hovering over an element.</p>
 	</div>
 
-	<div class="flex items-center space-x-4">
+	<div>
 		<Tooltip content="Another tooltip example">
 			<span class="cursor-help underline">Small tooltip</span>
 		</Tooltip>
 	</div>
 
-	<div class="flex items-center space-x-4">
+	<div>
 		<Tooltip
 			content="This is a medium-length tooltip that provides more detailed information about a feature or concept."
 		>
@@ -24,7 +24,7 @@
 		</Tooltip>
 	</div>
 
-	<div class="flex items-center space-x-4">
+	<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."
 		>
@@ -32,7 +32,7 @@
 		</Tooltip>
 	</div>
 
-	<div class="flex items-center space-x-4">
+	<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={Info}
@@ -41,7 +41,7 @@
 		</Tooltip>
 	</div>
 
-	<div class="flex items-center space-x-4">
+	<div>
 		<Tooltip
 			content="This tooltip has a longer open and close delay, making it slower to appear and disappear when hovering."
 			openDelay={1000}
@@ -51,7 +51,7 @@
 		</Tooltip>
 	</div>
 
-	<div class="flex items-center space-x-4">
+	<div>
 		<Tooltip
 			content="This tooltip has a longer fade in duration, making it show up more slowly."
 			fadeDuration={1000}
@@ -59,4 +59,12 @@
 			<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>

From 25384998ce52d346197d93886b8ad19b673a9638 Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Fri, 25 Oct 2024 13:08:43 -0700
Subject: [PATCH 4/4] enhancement: defaulting to info icon

---
 src/lib/components/tooltip/tooltip.svelte                   | 4 ++--
 .../(dev)/debug/components/sections/tooltips.svelte         | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/tooltip/tooltip.svelte b/src/lib/components/tooltip/tooltip.svelte
index 6082268c..360c8da0 100644
--- a/src/lib/components/tooltip/tooltip.svelte
+++ b/src/lib/components/tooltip/tooltip.svelte
@@ -2,7 +2,7 @@
 	import { createTooltip, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 	import { type Snippet } from 'svelte';
-	import type { Icon } from 'lucide-svelte';
+	import { Info, type Icon } from 'lucide-svelte';
 
 	interface Props {
 		content: string;
@@ -16,7 +16,7 @@
 	const {
 		content,
 		children,
-		icon,
+		icon = Info,
 		fadeDuration = 50,
 		openDelay = 300,
 		closeDelay = 300
diff --git a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
index 91001bad..1cf4de39 100644
--- a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
+++ b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Info } from 'lucide-svelte';
+	import { ShieldQuestion, Info } from 'lucide-svelte';
 	import { Stack } from '$lib/components/layout';
 	import Tooltip from '$lib/components/tooltip/tooltip.svelte';
 </script>
@@ -35,9 +35,9 @@
 	<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={Info}
+			icon={ShieldQuestion}
 		>
-			<span class="cursor-help underline">Tooltip with icon</span>
+			<span class="cursor-help underline">Tooltip with custom icon</span>
 		</Tooltip>
 	</div>