<template>
    <div :id="uuid" class="hc-el-tooltip-box relative h-full w-full">
        <HcElTooltip :effect="effect" :content="content" :placement="placement">
            <slot />
        </HcElTooltip>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { getRandom } from 'js-fast-way'
import { ElTooltip as HcElTooltip } from 'element-plus'

const props = defineProps({
    content: [String, Number],
    placement: [String, Number],
    effect: [String, Number],
})

const uuid = getRandom(8)

//渲染完成
onMounted(()=> {
    const doms = document.getElementById(uuid)?.children
    if (doms.length <= 0) return
    doms[0].setAttribute('data-tip', props.content)
})
</script>
