要实现details标签的气泡定位，必须重置其默认样式：将summary设为position: relative、inline-block/inline-flex，隐藏原生箭头，用::after伪元素通过data-tip动态生成带箭头的绝对定位气泡，并配合:focus-within和tabindex实现跨端兼容，表格中需额外包裹relative定位的div容器。
details标签本身不支持气泡定位，必须用CSS重置默认行为
浏览器对 <details> 的原生样式控制极弱，summary 展开后内容默认是块级流式布局，根本不会“浮”在触发元素旁边。想做出气泡效果，第一步就是彻底剥离它的语义化渲染逻辑：去掉默认的 display: list-item、禁用系统箭头、手动设 position: relative 到 summary 上——否则后续所有伪元素定位都会失效。
常见错误是直接给 details 加 position: relative，但真正需要定位锚点的是 summary 元素本身，因为气泡要相对于它悬停出现。
-
summary必须设position: relative，且display: inline-block或inline-flex（避免换行撑开宽度） - 用
summary::-webkit-details-marker和summary::marker双重隐藏原生三角符号 -
details[open] > summary不要加cursor: pointer，否则点击区域和视觉焦点不一致，移动端易误触
用::after伪元素画气泡+箭头，content必须从data-tip读取
不能把提示文字硬写进 CSS 的 content: "xxx"，那样没法复用。正确做法是让 summary 带 data-tip 属性，再用 content: attr(data-tip) 动态注入——这是唯一能保持 HTML 语义清晰又支持多语言切换的方式。
箭头用 border 三角形最稳，但注意：朝下箭头的 border-top 要和气泡背景色一致，否则边缘会漏白；如果气泡有 border-radius，箭头根部也得加 border-radius: 2px 对齐，不然视觉上会“断开”。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 气泡主体设
position: absolute; top: 100%; left: 50%; transform: translateX(-50%)实现居中悬停 - 箭头伪元素设
top: -8px; left: 50%; transform: translateX(-50%)，再用border-bottom: 6px solid #333（朝上）或border-top: 6px solid #333（朝下） - 务必加
z-index: 1，否则表格单元格或卡片阴影可能盖住气泡
details + hover 组合在移动端根本不可靠，必须加:focus-within fallback
iOS Safari 和多数安卓 WebView 对 :hover 在触摸设备上的支持是“点一下激活、再点一下才关闭”，中间没有悬停状态。只靠 details:hover > summary::after 会导致气泡卡死或完全不显示。
解决方案是放弃纯 hover，改用 details:focus-within > summary::after，并确保 summary 有 tabindex="0"。这样键盘用户能聚焦，触摸用户点一次就展开，再点空白处自动收起——比 JS 更轻量，且天然支持可访问性。
-
summary必须加tabindex="0"，否则:focus-within不触发 - 不要用
display: none控制气泡显隐，改用visibility: hidden; opacity: 0; pointer-events: none - 过渡动画写成
transition: opacity 0.2s, visibility 0s 0.2s，避免闪跳
表格里用details做气泡会失效，必须包裹一层div
<td> 是 display: table-cell，而 details 在某些旧版 Safari 和 WebView 中无法正确继承定位上下文。直接把 details 放进 <td>，气泡大概率飘到页面左上角或者根本不显示。
可靠做法是给 <td> 内容套一层 <div class="tooltip-wrapper">，再把 details 放进去。这个 wrapper 才设 position: relative，所有定位都基于它，而不是 <td> 本身。
- 不要尝试给
<td>直接加position: relative，兼容性差且容易被表格样式覆盖 -
.tooltip-wrapper设display: inline-block，避免影响表格单元格高度计算 - 长文本提示需加
max-width: 240px; white-space: normal; word-break: break-word，否则溢出裁切
pointer-events: none 必须只加在箭头上，不能加在整个气泡上——否则鼠标移过去会立刻触发 :hover 退出，导致气泡闪退。真正的做法是箭头伪元素加 pointer-events: none，气泡主体保留 pointer-events: auto，这样才能平滑悬停。 
