details标签无法原生实现气泡效果，因其展开内容占据文档流、不支持绝对定位；需用css伪元素模拟，但存在定位、兼容性及移动端交互等限制。
details 标签本身不支持气泡（tooltip/popover）效果，它只提供原生的可折叠交互逻辑；想用它“做出气泡”，必须配合 CSS 定位 + 伪元素模拟箭头 + summary 触发控制，且仅限 hover/focus 场景——点击展开后内容默认是块级流式布局，不是悬浮气泡。
为什么不能直接用 details 实现真正气泡
原生 details 的行为是：展开时内容插入 DOM 流中，占据文档位置，会推挤下方元素；而气泡的核心特征是脱离文档流、绝对/固定定位、不干扰布局。两者语义和渲染机制冲突。details 没有 position: absolute 能力，也不能响应鼠标移入目标区域外自动收起——这些都得靠额外 CSS 或 JS 补足。
用 details + CSS 模拟“标签式气泡”的实操要点
可行路径是把 details 当作触发开关，用 summary 作为锚点，再用 ::after 或 ::before 在其旁边生成一个绝对定位的“伪气泡”容器。但要注意：
- 必须给
details设position: relative，否则伪元素无法相对summary精确定位 -
summary需设display: inline-block或inline-flex，避免换行导致定位偏移 - 伪气泡内容只能靠
data-tooltip或title提取，details内部子元素无法被伪元素直接读取 - IE 和旧版 Safari 不支持
details的:has()选择器，所以“展开时显示气泡”需用details[open] summary::after这类兼容写法
details 气泡在移动端的隐藏陷阱
移动端 Safari 对 details 的 :hover 支持极弱，tap 后不会持久保持 open 状态，伪气泡一闪即逝；若依赖 focus，又要求 summary 可聚焦（得加 tabindex="0"），且键盘用户需要 Esc 关闭——这已超出纯 CSS 范畴。真实项目中，一旦需要稳定悬停、点击保持、焦点管理或屏幕阅读器兼容，就必须用 JS 监听 toggle 事件并手动控制气泡显隐。
真正难的不是画出那个三角箭头，而是让“展开”和“悬浮提示”两种交互意图不打架——details 天然属于“内容可见性控制”，而气泡属于“瞬时辅助信息”，混用时边界极易模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
