From c97347722acf1fd113c0512501906821689a36c8 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 17 Jul 2024 17:50:03 +0100
Subject: [PATCH] feat(#46): Add Tooltip component

---
 src/lib/components/Tooltip.svelte | 37 +++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/lib/components/Tooltip.svelte

diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
new file mode 100644
index 0000000..84643ea
--- /dev/null
+++ b/src/lib/components/Tooltip.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	let show = false;
+
+	function handleClick() {
+		show = !show;
+	}
+</script>
+
+<div class="relative inline-block">
+	<div
+		class="tooltip-trigger cursor-pointer"
+		on:click={handleClick}
+		on:mouseenter={() => (show = true)}
+		on:mouseleave={() => (show = false)}
+	>
+		<slot name="hover-target" />
+	</div>
+
+	{#if show}
+		<div class="tooltip-content absolute z-10 mt-2 w-52">
+			<slot name="tooltip" />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tooltip-content {
+		@apply bg-gray-800 text-white text-sm p-2 rounded shadow-lg;
+	}
+
+	.tooltip-trigger:hover + .tooltip-content {
+		display: block;
+	}
+	.tooltip-content {
+		display: none;
+	}
+</style>