伪元素气泡定位需父容器设position: relative，::after用content+top/right/margin精确定位右上角；三角箭头用border组合实现并加translateZ(0)防模糊；overflow:hidden时需JS提级至body或改父级overflow；触屏需JS监听touch事件；气泡设pointer-events:none但内部交互元素恢复auto。
伪元素 ::before 和 ::after 怎么定位到鼠标悬停元素右上角
靠相对定位 + 伪元素绝对定位是唯一靠谱做法。父容器必须设 position: relative，否则 absolute 会往上层最近的定位祖先找，经常飘到页面左上角。
-
::after里用content: "提示文字"，不能留空，否则不渲染 - 用
top: -8px+right: 100%+margin-right: 8px把气泡塞进右上角外侧，比单纯right: 100%更稳（避免边框遮挡） - 别用
transform: translate(-100%, -100%)对齐，它会让气泡脱离文档流计算，hover 区域可能变小甚至失效
气泡三角箭头怎么用纯 CSS 画出来且不模糊
用 border 拼三角最轻量，但必须关掉其他三边边框，只留一条边有宽度和颜色，再用 transform: rotate() 或 clip-path 调角度容易糊——直接放弃。
- 推荐写法：
border-top: 6px solid #333+border-left: 6px solid transparent+border-right: 6px solid transparent，再配合position: absolute往右上角微调 - 三角方向要和气泡位置匹配：右上角气泡，箭头朝左，就该用
border-right配合border-top/bottom透明边框 - 高缩放屏（如 macOS Retina）下，
border三角可能发虚，加transform: translateZ(0)强制 GPU 渲染能缓解
hover 气泡怎么避免被父容器 overflow: hidden 切掉
这是实际项目里最常踩的坑——气泡明明写了 position: absolute，却在卡片、表格单元格里只显示半截。
- 根本原因是父级设置了
overflow: hidden或auto，而气泡又没逃出它的裁剪范围 - 解法不是删掉
overflow（往往影响布局），而是把气泡提级到 body 下，用 JS 监听mouseenter动态创建并定位，CSS 只负责样式 - 如果坚持纯 CSS，只能让触发元素的父级改用
overflow: visible，但得确认不会破坏圆角、阴影或滚动逻辑
移动端 touch 设备上 hover 气泡为什么不触发
因为 :hover 在多数触摸设备上仅在模拟“悬停”时短暂生效（比如长按后），无法稳定响应手指停留。
立即学习“前端免费学习笔记（深入）”；
- 真要支持触屏，必须加 JS：监听
touchstart显示气泡，touchend延迟 1.5s 隐藏（防误触），同时保留hover给桌面端 - 别用
@media (hover: hover)切换逻辑，iOS Safari 对这个媒体查询支持不稳定 - 气泡本身要设
pointer-events: none，否则挡住下方按钮点击；但内部链接或按钮得单独设回pointer-events: auto
真正麻烦的是气泡的边界检测——当它靠近视口边缘时，得自动翻转方向或调整偏移，这没法用纯 CSS 可靠实现，JS 计算 offsetTop/Left + scrollY 才能兜底。
