From f12f6df6aee958c1ddc7cfcf58e27bd44d074ea1 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Wed, 11 Dec 2024 20:10:00 +0330
Subject: [PATCH] Create tooltip component

---
 frontend/components/ui/Tooltip.vue | 38 ++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/components/ui/Tooltip.vue

diff --git a/frontend/components/ui/Tooltip.vue b/frontend/components/ui/Tooltip.vue
new file mode 100644
index 0000000..54ba536
--- /dev/null
+++ b/frontend/components/ui/Tooltip.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+
+// type
+type Props = {
+    title?: string
+}
+
+// prop
+const props = defineProps<Props>();
+const { title } = toRefs(props);
+
+</script>
+
+<template>
+    <TooltipProvider
+        :disabled="!title"
+        :delay-duration="0"
+    >
+        <TooltipRoot>
+            <TooltipTrigger>
+                <slot />
+            </TooltipTrigger>
+            <TooltipPortal>
+                <TooltipContent
+                    class="bg-black text-white px-4 py-3 rounded-full"
+                    :side-offset="5"
+                >
+                    {{ title }}
+                    <TooltipArrow
+                        class="fill-black"
+                        :width="12"
+                        :height="6"
+                    />
+                </TooltipContent>
+            </TooltipPortal>
+        </TooltipRoot>
+    </TooltipProvider>
+</template>
\ No newline at end of file