<template>
  <el-popover
    placement="right"
    :width="props.width"
    trigger="hover"
  >
    <div class="popoverContent">
      <slot></slot>
    </div>
    <template #reference>
      <slot name="reference">
        <el-icon :size="14" class="icon"><QuestionFilled /></el-icon>
      </slot>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import {} from 'vue'
const props = defineProps({
  width: {
    type: [Number, String],
    default: 200
  }
})
</script>

<style lang="scss" scoped>
.icon {
  font-size: 16px !important;
  margin-top: 6px;
}
</style>