<template>
    <el-tooltip :content="content_tip" placement="top" :popper-class="popperClass" :disabled="!isBubble">
        <slot />
    </el-tooltip>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'

//参数
const props = defineProps({
    content: {
        type: String,
        default: '',
    },
    popperClass: {
        type: String,
        default: '',
    },
})

const useAppState = useAppStore()

//变量
const content_tip = ref(props.content)
const isBubble = ref(useAppState.getBubble)

//监听
watch(() => [
    props.content,
    useAppState.getBubble,
], ([tip, bubble]) => {
    content_tip.value = tip
    isBubble.value = bubble
})
</script>
