<td> 是 display: table-cell 的非替换元素，但伪元素在其上渲染不稳定；可靠做法是将伪元素挂载到 <td> 的包裹层（如 <span>）上，而非直接作用于 <td> 本身。
为什么 ::before 和 ::after 不能直接作用于 <td>？
因为 <td> 是替换元素（replaced element）且默认为 display: table-cell，某些浏览器（尤其是旧版 Safari 和部分移动端 WebView）对伪元素在 <td> 上的渲染支持不稳定——可能完全不显示、位置错乱或遮挡内容。真正可靠的做法是把提示逻辑“上提”到包裹层，比如给 <td> 加一层 <span> 或直接用 <div> 作为内容容器。
怎么用 ::after 实现带箭头的气泡？
核心是利用伪元素的 content + position: absolute + transform 定位，再用 border 技巧画箭头。关键点不是“能不能”，而是“怎么控住位置和层级”：
-
<td>必须设为position: relative，否则::after的绝对定位会相对于<table>或视口偏移 - 气泡的
top/left要配合transform: translate(-50%, -100%)实现居中悬停，避免硬编码像素值 - 箭头靠
border实现：设置三边透明、一边有色，再旋转或用clip-path切角（更可控） - 务必加
z-index: 1，否则可能被相邻单元格遮盖
示例 CSS：
td.has-tooltip {
position: relative;
}
td.has-tooltip::after {
content: attr(data-tip);
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 1;
}
td.has-tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #333;
}
鼠标 hover 触发时，气泡闪动或消失怎么办？
这是最常踩的坑：hover 区域和气泡之间有空隙，鼠标一移就触发 :hover 离开，气泡立刻消失，形成闪烁循环。解决方式不是加 delay，而是“扩大热区”：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>设置padding，同时让::after的top值略大于padding，确保气泡底部与单元格上沿无缝衔接 - 用
pointer-events: none关掉气泡本身的鼠标事件，避免鼠标经过气泡时触发离开 - 如果表格有边框或间距（
border-spacing），需额外调整top和left，否则气泡会卡在间隙里
移动端点击显示气泡，CSS 能搞定吗？
纯 CSS 没法可靠模拟“点击展开”，因为 :focus 在 <td> 上无效（不可聚焦），:active 只维持毫秒级。必须引入轻量 JS 来切换 class：
- 给
<td>加tabindex="0"，让它可获得焦点 - 用
:focus-within或监听click事件添加tooltip-open类 - CSS 中写
td.tooltip-open::after替代:hover规则 - 注意 iOS Safari 对
focus的特殊行为：需配合-webkit-tap-highlight-color: transparent
真正难的不是画气泡，是让气泡在各种缩放、滚动、多行文本、合并单元格（colspan/rowspan）场景下依然贴边不越界——这时候伪元素反而不如用 title 属性或独立 <div> 容器来得可控。
