UseElTooltip - 文字提示

组件介绍

UseElTooltip 是基于 Element Plus 的 ElTooltip 二次封装的文字提示组件，专注于提供开箱即用的文本溢出智能提示能力，内置单行文本省略样式与溢出自动检测逻辑，完整兼容原生 ElTooltip 核心属性，可直接替换原生 ElTooltip 使用，大幅降低表格列、长文本等场景下溢出提示的重复开发成本。

核心能力

智能溢出检测提示

内置 ResizeObserver 尺寸监听机制，自动检测文本元素是否溢出，仅当文本实际溢出显示省略号时才弹出 Tooltip，文本完整显示时自动禁用提示，避免无意义的悬浮提示，提供更自然的交互体验。

开箱即用的文本省略

内置标准 text-ellipsis 样式类，自动实现单行文本溢出显示省略号效果，包含 display: block、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 完整样式，无需业务侧重复编写省略号样式。

灵活的内容渲染方式

支持通过 content 属性直接传入提示文本，自动渲染为带省略样式的文本元素；同时支持完全自定义插槽内容，插槽自动透传到底层 ElTooltip，既满足简单文本场景的快速使用，也支持复杂触发元素的定制需求。

完整的弹出位置支持

支持 Element Plus Tooltip 全部 12 种弹出位置（top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end），默认使用 top 位置，满足不同布局场景的提示位置需求。

自定义样式扩展能力

提供 spanClass 配置项，支持为内部文本渲染元素添加自定义类名，业务侧可灵活扩展文本样式（如宽度限制、字体颜色、行高调整等），无需额外包裹元素即可实现样式定制。

智能的禁用状态管理

自动处理 disabled 状态逻辑：传入 content 时优先根据文本溢出状态自动控制提示禁用，同时尊重外部传入的 disabled 属性；未传入 content 时完全透传外部 disabled 属性，兼顾智能判断与手动控制需求。

原生组件完全兼容

基于 ElTooltip 封装，完整支持 v-bind 透传原生属性（如 effect、popper-class、show-after、hide-after 等），所有插槽自动透传，可直接替换原生 ElTooltip 使用，无迁移成本，同时补充原生组件缺失的溢出自动检测能力。

安全的生命周期管理

组件挂载时自动为文本元素注册 ResizeObserver 监听尺寸变化，卸载时自动断开观察者连接，避免内存泄漏；响应式更新溢出状态，保证窗口缩放、容器尺寸变化时提示状态始终准确。

轻量无依赖设计

仅依赖 Vue 3 与 Element Plus，无任何第三方额外依赖，组件逻辑精简，运行时性能优异，适合在表格列、标签页、卡片列表等大量长文本渲染场景批量使用。

类型安全的属性校验

内置 placement 属性值校验器，仅允许合法的 12 种位置参数，传入非法值时自动告警，帮助开发阶段快速发现配置错误，提升开发体验与代码健壮性。

使用

UseElTooltip

Props

/**
 * 组件props
 */
export default {
  /**
   * 显示的内容 也可被 slot#content 覆盖
   */
  content: {
    type: String,
    default: ''
  },
  /**
   * Tooltip组件出现的位置 默认top
   */
  placement: {
    type: String,
    default: 'top',
    validator: (value: string) =>
      [
        'top',
        'top-start',
        'top-end',
        'bottom',
        'bottom-start',
        'bottom-end',
        'left',
        'left-start',
        'left-end',
        'right',
        'right-start',
        'right-end'
      ].includes(value)
  },
  /**
   * span元素的类名
   */
  spanClass: {
    type: String,
    default: ''
  }
}

UseElTooltip - 文字提示 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

UseElTooltip - 文字提示

组件介绍

核心能力

使用

Props