attr() 在移动端气泡中只能直接读取 html 元素的字符串型属性值（如 data-tip），且仅限用于伪元素 content 属性，不能用于 width、color 等其他 css 属性。
attr() 函数在移动端气泡中能直接读取什么属性
attr() 在 CSS 中只能读取 HTML 元素的**字符串型属性值**，且仅限于用作 content 的值（即伪元素 ::before 或 ::after 中）。它不能用于 width、color 等其他 CSS 属性（除非配合 CSS 自定义属性 + JS，但那已超出 attr() 原生能力）。
常见误用是试图写 div { color: attr(data-tip color); } —— 这会静默失效。真正能跑通的只有类似：
div::after {
content: attr(data-tip);
position: absolute;
/* 其他气泡样式 */
}
所以移动端提示气泡若想靠 attr() 动态显示内容，前提是：气泡必须用伪元素实现，且提示文本必须存在某个 HTML 属性里（如 data-tip、title，但注意 title 不被所有浏览器支持用于 attr(title)，推荐统一用 data-tip）。
为什么 data-tip 比 title 更可靠，以及怎么避免中文乱码或空格截断
部分安卓 WebView 和旧版 Safari 对 attr(title) 解析不稳定，甚至返回空字符串；而 data-tip 是标准自定义属性，兼容性明确。更重要的是：attr() 读取时**原样输出**，不处理 HTML 实体、不 trim 空格、不转义换行。
容易踩的坑包括：
- HTML 中写
<button data-tip="点击上传"></button>→ 正常；但若写成data-tip="点击上传 "（全角空格结尾），气泡末尾会多一个看不见的空白 - 含换行的提示（如
data-tip="第一行↵第二行"）在content中不会自动换行，需额外加white-space: pre-wrap - 若数据来自后端模板（如 Nunjucks / Jinja），确保未对引号或斜杠做双重转义，否则可能输出
data-tip=""危险操作""，导致气泡显示为字面量"危险操作"
移动端气泡定位依赖 attr() 吗？不，但 attr() 能帮它更轻量
attr() 本身不参与定位，但能让气泡结构彻底无 DOM 节点：不用再为每个按钮额外加 <span class="tooltip">xxx</span>。这意味着：
- HTML 更干净，减少节点数 → 对低端安卓机的渲染性能有可测提升（尤其列表页上百个可提示项）
- JS 不用遍历绑定事件或动态插入内容，纯 CSS 驱动，规避了
DOMContentLoaded时机问题 - 但定位仍需靠相对/绝对定位 +
top/left计算，此时建议用data-tip-pos="top"配合 CSS 属性选择器细分样式，例如：
[data-tip-pos="top"]::after {
bottom: 100%;
margin-bottom: 4px;
}
[data-tip-pos="right"]::after {
left: 100%;
margin-left: 4px;
}
attr() 在 iOS Safari 上显示异常？检查这三个点
真机调试中发现气泡不显示或内容为空，大概率不是 attr() 本身 bug，而是：
-
content伪元素缺少position: absolute或父容器没设position: relative，导致脱离文档流后不可见 -
data-tip值为空字符串（data-tip=""）或只含空格，attr()会输出空，但伪元素仍占位——此时加display: none切换反而更麻烦，建议用[data-tip]:not([data-tip=""])::after选择器控制显隐 - CSS 文件用了
@charset "UTF-8"但 HTML 未声明<meta charset="utf-8">，某些 iOS 版本会把中文attr()值解析为乱码（表现为方框或问号）
复杂点在于：attr() 看似简单，但它把内容来源从 CSS 拉回 HTML 层，意味着提示文案的维护位置、国际化处理、服务端渲染一致性都得同步调整。漏掉一处，气泡就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
