Element Plus el-tooltip嵌套el-popover

一、场景

        需求在按钮中鼠标移入显示Tooltip文字提示,点击显示Popover提示框

二、实现

<template>
  <el-tooltip effect="dark" content="删除" placement="top-start">
    <!-- 重要 -->
    <span>
      <el-popover
        placement="bottom-start"
        trigger="click"
        width="200"
        v-model:visible="visible"
      >
        <p>确认删除吗?</p>
        <div style="text-align: right; margin: 0">
          <el-button size="small" text @click="visible = false">取消</el-button>
          <el-button size="small" type="primary" @click="visible = false"
            >确认</el-button
          >
        </div>
        <template #reference>
          <!-- 触发源 -->
          <el-button type="danger" icon="Delete" plain></el-button>
        </template> </el-popover
    ></span>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref } from "vue";
const visible = ref(false);
</script>

<style scoped></style>

三、效果