<script setup>
const trigger = Math.random().toString(20).substr(2, 10);

defineProps({
    setClass: String,
})
</script>
<template>
    <div :data-tooltip-target="trigger" data-tooltip-style="light">
        <slot name="trigger" />
    </div>

    <div
        :id="trigger"
        role="tooltip"
        :class="`absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 tooltip text-center ${setClass} `"
    >
        <slot name="content" />

        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
</template>
