Element-Plus：popconfirm与tooltip一起使用不生效？

金金金__2025-06-09 14:16

你们好，我是金金金。

场景

我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip，产品要求是两个需要结合一起使用，也就是鼠标悬浮上去有提示文字，并且点击之后需要出现气泡确认框

代码

js 复制代码

<el-popconfirm title="是否清空已有的chunk?" @confirm="handleContinueParseClick(scope.row, 'ok')"
  @cancel="handleContinueParseClick(scope.row, 'cancel')">
  <template #reference>
    <el-tooltip effect="dark" content="开始解析" placement="top-start">
      <el-icon size="20" color="#409eff" style="cursor: pointer">
        <VideoPlay />
      </el-icon>
    </el-tooltip>
  </template>
</el-popconfirm>

换了好几种写法，那么就是提示文字出现了，气泡确认框点击没反应
要么就是气泡确认框出现了然后鼠标悬浮上去没提示文字

解决

el-popconfirm与el-tooltip一起使用时失效解决办法： 添加关键的reference,并且用div再包裹一层

js 复制代码

<el-popconfirm title="是否清空已有的chunk?" @confirm="handleContinueParseClick(scope.row, 'ok')"
  @cancel="handleContinueParseClick(scope.row, 'cancel')">
  <template #reference>
    <div style="display: flex; align-items: center;">
      <el-tooltip effect="dark" content="开始解析" placement="top-start">
        <el-icon size="20" color="#409eff" style="cursor: pointer">
          <VideoPlay />
        </el-icon>
      </el-tooltip>
    </div>
  </template>
</el-popconfirm>

测试

已测试，完美符合产品需求~

编写有误还请大佬指正，万分感谢。