data-tooltip属性必须写在触发元素上，否则伪元素无法读取；气泡需用position: absolute定位并配对::before/::after；过渡效果应使用opacity+visibility而非display；移动端需用:focus或JS替代:hover；注意z-index与overflow:hidden冲突。
data-tooltip属性必须写在触发元素上，不能放错位置
很多人把data-tooltip加在<span>或<div>内部，结果attr(data-tooltip)取不到值——因为伪元素是直接挂在触发元素上的，content: attr(data-tooltip)只读当前元素的属性。正确做法是让按钮、链接等交互元素自己带这个属性：<button data-tooltip="保存当前设置">⚙️</button>。
常见错误现象：气泡内容为空、显示“none”或直接不渲染。检查开发者工具里该元素是否真有data-tooltip属性，且拼写完全一致（CSS对大小写敏感）。
::before和::after必须配对使用position: absolute + top/left
只设content不设定位，气泡会按行内流式布局，贴着文字挤在一起；没加position: relative到父容器，::after就会上溯到<body>定位，飘到页面左上角。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 触发元素必须有
position: relative -
::before画气泡主体，::after画箭头，两者都设position: absolute - 箭头常用
top: 100%+left: 50%+transform: translateX(-50%)居中对齐下方 - 气泡主体用
top: 100%+margin-top: 4px留出间距，别用bottom反向计算
opacity+visibility过渡比display切换更可靠
display: none/block无法触发transition，会导致气泡瞬间闪现；而visibility: hidden/visible配合opacity: 0/1才能实现淡入淡出。但要注意：visibility: hidden仍占文档流位置，所以必须搭配position: absolute脱离流式布局，否则会撑开空白区域。
关键参数组合：
-
opacity: 0; visibility: hidden;（默认隐藏） -
transition: opacity 0.2s, visibility 0.2s;（两个都要写，否则visibility切换无过渡） &:hover::before { opacity: 1; visibility: visible; }
移动端点击失效不是bug，是:hover机制限制
绝大多数触摸设备（iOS Safari、Chrome on Android）不支持:hover持续触发，点一下就走，气泡闪一下就消失。这不是你代码写错了，而是纯CSS方案天生不覆盖移动端交互场景。
如果必须兼容点击，有两个务实选择：
- 给触发元素加
tabindex="0"，改用:focus代替:hover（键盘用户也能用） - 放弃纯CSS，用
class="tooltip--active"+ 简单JS监听click切换（10行以内搞定） - 别硬套
pointer-events: none透传点击——它会让气泡本身不可点击，也破坏焦点链
真正容易被忽略的是：桌面端hover气泡一旦加了z-index，又没处理父容器的overflow: hidden，气泡常被裁掉一半——检查所有上层祖先是否有这个声明，尤其是<main>或<section>。
