<template>
  <el-tooltip
    v-if="props.tooltip"
    :content="props.tooltip"
    :disabled="props.disabled"
    :show-after="0"
    :hide-after="0"
    :popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
    popper-class="non-interactive-tooltip"
  >
    <NoobButton :disabled="props.disabled" v-bind="buttonProps">
      <slot />
    </NoobButton>
  </el-tooltip>
  <NoobButton v-else :disabled="props.disabled" v-bind="buttonProps">
    <slot />
  </NoobButton>
</template>

<script setup lang="ts">
import { useAttrs } from "vue";
import { ElTooltip } from "element-plus";
import { computed } from "vue";
import { NoobButton } from "noob-mengyxu";

defineOptions({ inheritAttrs: false });

interface Props {
  tooltip?: string;
  disabled: boolean;
}

const props = defineProps<Props>();
const attrs = useAttrs();

const buttonProps = computed(() => {
  const { class: _, ...rest } = attrs;
  return rest;
});
</script>

<style>
.non-interactive-tooltip {
  pointer-events: none !important;
}
</style>
