click 触发的 tooltip 不能只靠 :hover，因其无法响应点击且无法维持显示；必须用 JavaScript 切换 aria-expanded 属性，配合 CSS 属性选择器控制 display，同时注意 transform 创建定位上下文及移动端 role/touch-action 等兼容性问题。
click 触发的 tooltip 为什么不能只靠 :hover？
因为 :hover 只响应鼠标移入，无法捕捉点击动作，也无法维持显示状态——点一下就消失，根本来不及看内容。真要“点击显示、再点隐藏”，必须用 JavaScript 控制 display 或 visibility，CSS 单独做不到。
用 aria-expanded + display: none/block 是最稳的组合
不依赖 JS 框架，纯原生方案里，这个组合兼容性好、语义清晰、屏幕阅读器也能识别。关键是把“是否展开”这个状态落到 HTML 属性上，再用 CSS 做条件渲染。
- 给触发按钮加
aria-expanded="false"，初始设为false - 信息框默认
display: none，用属性选择器控制显隐：button[aria-expanded="true"] + .tooltip { display: block; } - JS 只负责切状态：
btn.setAttribute('aria-expanded', 'true')或'false' - 别用
visibility: hidden替代display: none——它仍占布局空间，容易撑乱页面
定位错位？检查父容器是否用了 transform 或 perspective
CSS 的 position: absolute 会找最近的「定位上下文」（即 position 不是 static 的祖先）。但 transform、perspective、filter 等属性也会创建新的定位上下文，导致 tooltip 相对于错误的父级定位。
- 快速排查：在 DevTools 中选中 tooltip，看「Computed」面板里
position的 reference element 是谁 - 临时修复：给 tooltip 的直接父容器加
transform: none（如果它本就不需要 transform） - 长期解法：把 tooltip 插到
下，用 JS 动态挂载，彻底脱离局部定位陷阱
移动端点击失效？记得加 cursor: pointer 和 touch-action: manipulation
iOS Safari 和部分安卓浏览器对非可点击元素的 click 事件有延迟或拦截，尤其当按钮只是 <div> 或没设 <code>role="button" 时。
立即学习“前端免费学习笔记（深入）”；
- 确保触发元素有
cursor: pointer（视觉提示）和touch-action: manipulation（告诉浏览器这是操作意图） - 如果用
<div> 当按钮，必须加 <code>role="button"和tabindex="0"，否则键盘用户和读屏器都不可达 - 避免在同一个元素上同时监听
click和touchstart——可能触发两次，推荐统一用click，并确保fastclick类库没干扰它
实际做下来，最常卡住的不是怎么写，而是忘了
aria-expanded 要手动同步、忘了 transform 会偷偷改定位参考系、还有移动端没补 role 导致测试时突然不可用。这些点不报错，但一上线就露馅。
