tooltip必须绑定到td元素而非table，优先读取data-tip属性，用event.target.closest('td')安全获取单元格，td设position: relative以准确定位，移出时300ms延迟隐藏并判断relatedtarget是否为同表td。
Tooltip触发逻辑必须绑定到而非
直接给
加onmouseover事件会导致整个表格悬浮时统一触发，无法区分具体单元格内容。真实需求是每个<td>显示自己内部的文本或属性值，所以事件监听必须落到单元格级别。
<p>常见错误是用JS遍历<code>document.querySelectorAll('table td')但漏掉动态插入的行——建议在渲染后立即绑定，或使用事件委托（监听<table>的<code>mouseover，再用event.target判断是否为<td>）。
<ul><li>若用事件委托，注意<code>event.target可能是<td>里的<code><span></span>或<img>，需用event.target.closest('td')安全获取单元格
避免重复绑定：每次重绘表格前先tableElement.removeEventListener('mouseover', handler)
移动端需额外处理touchstart，单纯hover在iOS Safari上不可靠
Tooltip内容应优先取data-tip属性而非textContent
直接读td.textContent会包含换行、空格、隐藏元素文本，导致提示内容冗余或错乱。更可控的做法是显式声明data-tip属性：
<td data-tip="用户ID: 12345">12345</td>
这样既能避免格式污染，也方便国际化或条件渲染（比如空值时设data-tip="暂无数据"）。
- 若未设置
data-tip，再fallback到td.innerText.trim()，不用textContent（它保留所有空白符）
- 对含HTML的单元格（如带
<strong></strong>的文本），innerText会自动转义，更安全
- 服务端渲染时可直接注入
data-tip，减少客户端计算
用CSS定位Tooltip时避开table-layout: fixed的干扰
很多表格用了table-layout: fixed来控制列宽，但这会让<td>的<code>getBoundingClientRect()返回的位置不准确——尤其当内容溢出被截断时，Tooltip容易偏移或贴边显示。
解决方案不是禁用fixed，而是用td.offsetParent配合td.offsetTop/td.offsetLeft计算相对位置，或者改用position: relative在<td>上，让Tooltip绝对定位在其内部。
<ul><li>推荐在<code><td>上加<code>style="position: relative;"，Tooltip元素用position: absolute; top: 100%; left: 0;
避免用transform: translate()做偏移，它会影响getBoundingClientRect()结果
滚动时Tooltip需重新定位，监听scroll事件成本高，不如用position: fixed + 动态计算视口坐标
Tooltip销毁时机比创建更关键
很多人只关注怎么显示，却忽略隐藏逻辑——鼠标移出<td>立刻销毁Tooltip会导致闪退，而延迟隐藏又可能卡在半空。真实场景中要区分“移出当前单元格”和“移入相邻单元格”：
<ul><li>用<code>setTimeout加300ms延迟隐藏，但mouseout时若event.relatedTarget仍是同一表格内的<td>，就取消销毁
<li>Tooltip元素本身不参与事件流，所以鼠标移到Tooltip上不会触发<code>mouseover，需手动给Tooltip加pointer-events: none或监听其mouseenter
键盘用户按Tab键切换焦点时，Tooltip应跟随focus状态，仅靠鼠标事件不够
最麻烦的其实是合并单元格（rowspan/colspan）——Tooltip位置得按实际渲染区域算，不能只看DOM结构。这种场景下，getBoundingClientRect()仍是唯一可靠依据，但必须等浏览器完成布局后再调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
