<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>
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>