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>