<script lang="ts" setup>
const props = defineProps({
  id: {
    type: String,
    required: false,
    default: '',
  },
  tips: {
    type: String,
    required: false,
    default: '',
  },
  placement: {
    type: String,
    required: false,
    default: 'right-start',
  },
  appendToBody: {
    type: Boolean,
    required: false,
    default: false,
  },
  popClass: {
    type: String,
    required: false,
    default: '',
  },
});
</script>

<template>
  <div class="icon-help-container">
    <el-tooltip
      effect="dark"
      :placement="props.placement"
      :teleported="appendToBody"
      :popper-class="props.popClass"
      trigger-keys
    >
      <template #content> <slot>{{ props.tips }}</slot> </template>
      <span :id="$props.id" class="icon-help"></span>
    </el-tooltip>
  </div>
</template>

<style lang="scss" scoped>
.icon-help-container {
  display: inline-block;
  vertical-align: middle;
  .icon-help {
    display: inline-block;
    height: 16px;
    width: 16px;
    font-size: 16px;
    cursor: pointer;
    &:hover::before {
      color: $APP-COLOR-HOVER !important;
    }
  }
  :deep(.el-popper) {
    color: var(--o-text-color-primary);
    white-space: pre-wrap;
    max-width: 270px;
  }
}
</style>
