根据现有html里的元素上面动态创建el-tooltip组件并显示的几种方式

       1、 在这个示例中，我们创建了一个 ref 引用来指向我们想要附加 Tooltip 的 DOM 元素。然后在 onMounted 生命周期钩子中，我们创建了 Tooltip 组件的实例，并将其挂载到一个新创建的 DOM 元素上。我们还在触发元素上添加了 mouseenter 和 mouseleave 事件监听器来控制 Tooltip 的显示和隐藏。

<template>
  <div class="tooltip-trigger" ref="triggerEl">Hover me</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ElTooltip } from 'element-plus';

const triggerEl = ref(null);
let tooltipInstance = null;

onMounted(() => {
  if (triggerEl.value) {
    // 创建 tooltip 组件实例
    tooltipInstance = defineComponent({
      template: `<div><el-tooltip :content="content" placement="top"><span ref="tooltipTrigger"></span></el-tooltip></div>`,
      components: { ElTooltip },
      data() {
        return {
          content: 'This is a tooltip'
        };
      },
      mounted() {
        // 将 tooltip 的触发元素设置为动态创建的 span
        this.$refs.tooltipTrigger.appendChild(triggerEl.value);
      }
    });

    // 挂载到触发元素上
    const mountNode = document.createElement('div');
    triggerEl.value.appendChild(mountNode);
    tooltipInstance = createApp(tooltipInstance).mount(mountNode);

    // 监听鼠标事件来控制显示和隐藏
    triggerEl.value.addEventListener('mouseenter', () => {
      tooltipInstance.component.proxy.$refs.tooltip.content = 'Updated content';
    });
    triggerEl.value.addEventListener('mouseleave', () => {
      // 隐藏 tooltip
      tooltipInstance.component.proxy.$refs.tooltip.doDestroy();
    });
  }
});

onBeforeUnmount(() => {
  if (tooltipInstance) {
    // 销毁 tooltip 实例
    tooltipInstance.unmount();
  }
});
</script>

<style>
.tooltip-trigger {
  cursor: pointer;
}
</style>

2、下面通过找到一个 容器来进行动态创建虚拟节点的方式

 // 假设属性值存储在变量中
      nextTick(() => {
        const attributeValue = element.id;
        // 构建CSS选择器字符串
        const selector = `[data-element-id="${attributeValue}"]`;
        const container = document.querySelector(selector);
        console.log("container=",container)
        // 创建一个不可见的触发元素
          const trigger = document.createElement('div');
          trigger.style.display = 'none';
          container.appendChild(trigger);
        // 创建一个el-tooltip的虚拟节点
          const tooltipVNode = createVNode(ElTooltip, {
            content: nodeHtml.value,
            placement: 'top',
            offset: 100, // 可以根据需要调整偏移量
            //reference: trigger, // 使用触发元素的引用
            visible: true, // 设置为可见
          });

        
        // 使用render函数将虚拟节点渲染到容器元素上
        render(tooltipVNode, container);     
      })