<script lang="ts" setup>

// type
type Props = {
    title?: string
}

// prop
defineProps<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>