attr()无法用于tooltip定位计算，因不支持单位解析且兼容性差；应改用css自定义属性配合calc()或js动态设置，辅以transform位移和pointer-events精细控制。
Tooltip定位依赖attr()时，为什么伪元素总是偏移或消失？
因为attr()只能读取HTML属性值（如data-top），不能直接参与计算；CSS不支持在top/left里写calc(attr(data-top) + 10px)这种表达式——浏览器会忽略整个声明。
- 必须把数值型定位信息用
data-属性明确定义，比如data-top="8"，而不是data-position="top-8" - 如果属性值带单位（如
data-top="8px"），attr()会原样返回字符串，但top: attr(data-top);在多数浏览器中无效（CSS规范不支持自动解析单位） - 真正能用的只有纯数字+外部单位拼接，例如
top: calc(attr(data-top) * 1px);（仅Chrome/Edge 117+、Firefox 120+支持，Safari仍不支持）
兼容性差的attr()定位，有什么更稳妥的替代方案？
放弃用attr()驱动坐标，改用CSS自定义属性（--tooltip-top）配合:hover或JS注入——这是目前唯一全浏览器稳定的方式。
- HTML里写
data-tooltip="提示文字" style="--tooltip-top: 8; --tooltip-left: 12;" - CSS中用
top: calc(var(--tooltip-top) * 1px); left: calc(var(--tooltip-left) * 1px); - 如果用JS动态控制，优先设置
element.style.setProperty('--tooltip-top', topValue)，比反复改data-属性更可控 - 注意：IE完全不支持CSS变量，若需兼容IE，只能用JS绝对定位+
getBoundingClientRect()重算
伪元素::before/::after显示Tooltip时，z-index和pointer-events怎么设？
Tooltip常被父容器遮挡，或鼠标移过去就触发关闭（尤其配合:hover时），核心是层级和事件穿透问题。
-
z-index必须显式设置（哪怕只是z-index: 1），且父容器不能是position: static（否则z-index无效） - Tooltip本身加
pointer-events: none;，让它“透”过鼠标，避免干扰下方元素交互 - 但Tooltip内部文字需恢复
pointer-events: auto;，否则无法选中文本 - 如果Tooltip有关闭按钮，按钮要单独设
pointer-events: auto;，不然点不着
用transform: translate()微调位置比top/left更可靠吗？
是的，尤其当Tooltip父元素有transform、perspective或filter时，top/left会失效或错位，而translate()始终相对于自身渲染框生效。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
position: absolute; top: 0; left: 0; transform: translate(calc(var(--tooltip-left) * 1px), calc(var(--tooltip-top) * 1px)); - 这样即使父级加了
transform: scale(0.95)，Tooltip依然准确定位 - 注意：
translate()不会触发重排（reflow），性能优于频繁修改top/left - 但别混用——比如
top: 10px; transform: translateY(5px);会导致叠加偏移，容易误判
真正麻烦的是多层嵌套定位+动态内容高度变化，这时候attr()连看都不能看，老老实实用JS测高再设top更省心。
