Create tooltip component

2024-12-11 20:10:00 +03:30
parent 7e45367f3d
commit f12f6df6ae
1 changed files with 38 additions and 0 deletions
@@ -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>