<!-- Tooltip component -->
<script setup lang="ts">
import { ElTooltip } from 'element-plus';

// Props with defaults
const { content, placement = 'defeault' } = defineProps<{
    content: string;
    placement?: 'top' | 'left' | 'right' | 'bottom';
}>();
</script>

<template>
    <ElTooltip popper-class="tooltip" effect="dark" :content :placement="(placement as any)">
        <slot></slot>
    </ElTooltip>
</template>

<style lang="scss">
.tooltip {
    @apply text-white bg-base-500 rounded px-3 py-1.5 max-w-[278px] w-full text-center;
    --el-text-color-primary: theme('colors.base-500');
    border: none !important;
}
</style>
