Element Plus el-tooltip嵌套el-popover

1.场景

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

2.实现

el-tooltip与el-popover之间需要有一层dom元素

<template>
  <el-tooltip effect="dark" :show-after="500" content="功能开发" placement="right">
    <span ref="dom">  // 重要
      <el-popover placement="right" class="!bg-[var(--box-bg-color)]" :width="200" trigger="click">
        <div class="flex flex-wrap gap-1">
          <div
            class="flex flex-col w-50px h-50px justify-center items-center b-rd-3px cursor-pointer hover:bg-#d5dcff"
            :class="fun.show ? 'bg-#d5dcff' : ''"
            v-for="fun in funConfig"
            :key="fun.name"
            @click="fun.show = !fun.show"
          >
            <svg-icon :icon-class="fun.icon" class="text-30px"></svg-icon>
            <span class="text-12px">{{ fun.name }}</span>
          </div>
        </div>
        <template #reference>
          <button type="button" class="mapboxgl-ctrl-icon mapboxgl-style-fun"></button>
        </template>
      </el-popover> 
    </span>
  </el-tooltip>
</template>