From 7df118e7d681bde18fdedc1f1257ee1373883d97 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 12 Feb 2025 10:58:30 +0000
Subject: [PATCH] Add new tooltip component

---
 .../components/meltComponents/Tooltip.svelte  | 77 +++++++++++++++++++
 frontend/src/lib/zIndexes.ts                  |  3 +-
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/components/meltComponents/Tooltip.svelte

diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte
new file mode 100644
index 0000000000..9c08e25187
--- /dev/null
+++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import Markdown from 'svelte-exmarkdown'
+	import type { Placement } from '@floating-ui/core'
+	import { ExternalLink, InfoIcon } from 'lucide-svelte'
+	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
+	import { zIndexes } from '$lib/zIndexes'
+
+	import { createTooltip, melt } from '@melt-ui/svelte'
+	import { fade } from 'svelte/transition'
+
+	export let light = false
+	export let placement: Placement | undefined = 'bottom'
+	export let documentationLink: string | undefined = undefined
+	export let small = false
+	export let markdownTooltip: string | undefined = undefined
+	export let disablePopup: boolean = false
+	export let openDelay: number = 200
+	export let closeDelay: number = 0
+	export let portal: string | undefined | null = undefined
+
+	const plugins = [gfmPlugin()]
+
+	const {
+		elements: { trigger, content },
+		states: { open }
+	} = createTooltip({
+		positioning: {
+			placement
+		},
+		openDelay,
+		closeDelay,
+		closeOnPointerDown: false,
+		forceVisible: true,
+		disableHoverableContent: false,
+		group: true,
+		portal
+	})
+</script>
+
+<div use:melt={$trigger}>
+	<slot />
+	{#if !$$slots.default}
+		<div
+			class="inline-flex w-3 mx-0.5 h-3 {light
+				? 'text-tertiary-inverse'
+				: 'text-tertiary'} {$$props.class} "
+		>
+			<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
+		</div>
+	{/if}
+</div>
+
+{#if $open && !disablePopup}
+	<div
+		use:melt={$content}
+		transition:fade={{ duration: 100 }}
+		class="shadow max-w-sm break-words py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left"
+		style="z-index: {zIndexes.tooltip}"
+	>
+		{#if markdownTooltip}
+			<div class="prose-sm">
+				<Markdown md={markdownTooltip} {plugins} />
+			</div>
+		{:else}
+			<slot name="text" />
+		{/if}
+
+		{#if documentationLink}
+			<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
+				<div class="flex flex-row gap-2 mt-4">
+					See documentation
+					<ExternalLink size="16" />
+				</div>
+			</a>
+		{/if}
+	</div>
+{/if}
diff --git a/frontend/src/lib/zIndexes.ts b/frontend/src/lib/zIndexes.ts
index 2137887df0..e49a7deb62 100644
--- a/frontend/src/lib/zIndexes.ts
+++ b/frontend/src/lib/zIndexes.ts
@@ -8,5 +8,6 @@ export const zIndexes = {
 	contextMenu: 6000,
 	draggingComponent: 10000,
 	monacoEditor: 10000,
-	monacoEditorSuggestions: 10001
+	monacoEditorSuggestions: 10001,
+	tooltip: 20000
 }