Vue.js中如何正确为类名为mention的元素添加悬停Tooltip？

现有实现的核心问题 #

• 直接全局遍历DOM绑定事件的方式不符合Vue的设计逻辑：和组件渲染生命周期不同步，从你的DOM结构看这些mention是Quill富文本编辑器动态插入的节点，直接在当前执行时机取DOM大概率拿不到未渲染的内容，后续新增的mention节点也不会被绑定事件；如果用Vue3 <script setup> 写法，全局操作DOM甚至会因为上下文丢失导致方法调用失效
• 用map遍历DOM节点执行绑定操作属于语法误用：map的设计是返回转换后的新数组，遍历执行副作用逻辑应当用forEach
• 没有配套的事件解绑逻辑：组件卸载后遗留的事件监听会造成内存泄漏
• 逐元素绑定的方式性能差，mention节点数量较多的时候会产生大量重复的事件监听，容易出现卡顿

推荐实现：基于事件委托的无侵入绑定 #

完全不需要逐个遍历所有.mention元素绑定事件，只需要在mention所在的父级内容容器上绑定一次事件监听，靠事件冒泡机制统一处理所有mention的悬停逻辑，动态新增/删除的mention节点都能自动响应，不需要重复绑定。

具体代码实现 #

1. 在组件生命周期内绑定/解绑父容器事件，避免内存泄漏：

export default {
  data() {
    return {
      // 响应式存储当前悬停的mention信息，控制tooltip显示
      activeTooltip: null
    }
  },
  mounted() {
    // 绑定mention的公共父容器（从结构看你的mention是Quill生成的，父容器就是.ql-editor）
    this.contentRoot = document.querySelector('.ql-editor')
    // 统一绑定悬停相关事件
    this.contentRoot.addEventListener('mouseover', this.onMentionHover)
    this.contentRoot.addEventListener('mouseout', this.onMentionLeave)
  },
  beforeUnmount() {
    // 组件销毁时解绑，避免内存泄漏
    this.contentRoot.removeEventListener('mouseover', this.onMentionHover)
    this.contentRoot.removeEventListener('mouseout', this.onMentionLeave)
  },
  methods: {
    onMentionHover(e) {
      // 从冒泡的事件目标中匹配最近的.mention节点，无视内部嵌套的a标签、span标签
      const mentionNode = e.target.closest('.mention')
      if (!mentionNode) return
      // 直接从节点的dataset中读取预先存储的用户id、链接、名称信息
      this.activeTooltip = {
        userId: mentionNode.dataset.id,
        userLink: mentionNode.dataset.link,
        userName: mentionNode.querySelector('a').textContent,
        // 基于鼠标位置计算tooltip弹出坐标
        position: {
          left: e.clientX,
          top: e.clientY + 12
        }
      }
      // 这里可以根据userId请求用户详情接口，填充tooltip的额外信息（头像、简介等）
    },
    onMentionLeave(e) {
      const mentionNode = e.target.closest('.mention')
      if (!mentionNode) return
      // 鼠标移出时隐藏tooltip
      this.activeTooltip = null
    }
  }
}

2. 在组件模板中直接基于响应式的activeTooltip渲染Tooltip，完全不需要手动操作DOM插入节点：

<!-- 独立渲染Tooltip，不要插入到富文本内容区内部，避免被contenteditable属性影响 -->
<div 
  v-if="activeTooltip" 
  class="mention-tooltip"
  :style="{
    left: activeTooltip.position.left + 'px',
    top: activeTooltip.position.top + 'px'
  }"
>
  <div class="tooltip-header">
    <a :href="activeTooltip.userLink" target="_blank">{{ activeTooltip.userName }}</a>
  </div>
  <!-- 这里渲染接口返回的用户详情内容 -->
</div>

实现注意事项 #

• 计算Tooltip位置时要增加视口边界判断：如果tooltip弹出位置靠近屏幕底部/右侧，自动调整坐标避免超出可视范围
• 不要把Tooltip节点插入到mention所在的富文本contenteditable区域内，否则会被编辑器拦截、甚至被当成用户输入的内容提交
• 利用closest()方法匹配节点，不需要关心mention内部的DOM嵌套结构，哪怕后续富文本插件升级改了内部DOM结构，匹配逻辑也不会失效
• 悬停触发时可以增加100ms左右的延迟再显示Tooltip，避免鼠标快速划过时tooltip闪烁

内容的提问来源于stack exchange，提问作者Abhishek Matta