基于 ant-design-vue 中的 tooltip 动态创建 tooltip 效果
问题背景
表格中的单元格的内容超出的情况下，打点处理。当鼠标移动到打点的单元格上时，显示 tooltip 效果。不能采用模板的写法。
<template> <a-tooltip> <template slot="title"> prompt text </template> <a-button> Tooltip will show when mouse enter. </a-button> </a-tooltip> </template> 复制代码
当鼠标 hover 时可以获取到目标元素。动态创建一个 tooltip 挂载上去。
解决方案
采用 getBoundingClientRect 获取目标元素相对于视窗的 left 和 top。
采用 render 方法动态创建一个 tooltip 实例。
元素渲染完成后，从页面上获取tooltip元素，根据 目标元素的位置调整tooltip元素的位置。
示例代码
var showTooltip = function (elem, message) { hideTooltip(); var tooltip = new Vue({ render(h) { return h(Tooltip, { props: { title: message, defaultVisible: true, destroyTooltipOnHide: true, overlayClassName: 'gridTooltip' }, }); } }).$mount(); document.body.appendChild(tooltip.$el); // 渲染完成之后才能获取 tooltip 元素并调整它的位置。 setTimeout(function() { const target = document.querySelector(".gridTooltip"); if (target && elem) { const rect = elem.getBoundingClientRect(); target.style.top = rect.top - 32 + 'px'; target.style.left = rect.left + 'px'; } }, 10); }; 复制代码注意事项
创建 tooltip 时 defaultVisible 必须是 true。
创建 tooltip 时 浮层渲染父节点必须是 document.body。
tooltip 全局只能有一个，创建新的 tooltip 时，必须销毁旧的 tooltip。
设置 overlayClassName 的作用在于获取 tooltip 弹窗元素。
tooltip 弹窗元素的位置是相对于目标元素进行调整得到的。
作者：洛神赋
链接：https://juejin.cn/post/7018545642385440805