<script setup lang="ts">
import {Anchor} from "vuetify";
import {Ref} from "vue";

defineProps<{
    location?: Anchor;
    openDelay?: number;
}>();

defineSlots<{
    activator(props: any): any;
    default(props: { isActive: Ref<boolean> }): any;
}>();
</script>

<template>
    <v-tooltip :location="location ?? 'top'" :open-delay="openDelay ?? 200">
        <template #activator="activatorScope">
            <slot name="activator" v-bind="activatorScope" />
        </template>

        <template #default="tooltipScope">
            <div class="glass-tooltip glass glass-border">
                <slot v-bind="tooltipScope" />
            </div>
        </template>
    </v-tooltip>
</template>

<style scoped>
:deep(.v-overlay__content) {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.glass-tooltip {
    padding: 10px 14px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text);
    font-size: 0.85rem;
    z-index: 20000
}
</style>
