noob-components/packages/base/item/buttonWithTooltip.vue

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

<script setup lang="ts">
import { useAttrs, useSlots } 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 slots = useSlots();

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

const hasSlotContent = computed(() => {
  if (!slots.default) return false;
  const content = slots.default();
  // Filter out comments and empty text nodes
  const meaningfulContent = content.filter((vnode) => {
    // Comment nodes
    if (vnode.type === Symbol.for("v-cmt")) return false;
    // Text nodes that are empty or whitespace only
    if (vnode.type === Symbol.for("v-txt") && (!vnode.children || String(vnode.children).trim() === "")) return false;
    return true;
  });
  return meaningfulContent.length > 0;
});
</script>

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

/* Hide empty span in circle buttons - use !important to override element-plus styles */
.el-button.is-circle > span:empty,
.el-button.is-circle > span.el-button__text:empty,
.el-button.is-circle > span[class=""]:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
</style>