<script setup lang="ts">
defineProps<{
    open: boolean,
    message: string
}>();
</script>

<template>
    <div class="relative inline-flex items-center group w-min">
        <slot></slot>
        <div v-if="open" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
                                                whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
                                                text-popover-foreground shadow-md border border-border
                                                opacity-0 translate-y-1
                                                group-hover:opacity-100 group-hover:translate-y-0
                                                transition-opacity transition-transform duration-150">
            {{ message }}
        </div>
    </div>
</template>