根本原因是data-tip属性未真实存在于dom中，即使js设置dataset也不自动写入html；必须用setattribute或html直接声明，且需注意渲染时机与ie8兼容性。
为什么 [data-tip] 写了却没生效
根本原因不是选择器写错，而是 data-tip 这个属性压根没出现在 DOM 上——哪怕你用 JS 设置了 el.dataset.tip = "保存成功"，HTML 里依然没有 data-tip 属性，CSS 就不会触发。
- 必须显式存在：HTML 中写
<button data-tip="提交中">提交</button>，或运行el.setAttribute('data-tip', '提交中') -
dataset是异步的：赋值后需等待一次渲染周期（如requestAnimationFrame）或强制重排（getComputedStyle(el).opacity），否则 CSS 看不到新属性 - IE8 只认标准属性且要求引号：
[disabled]可用，但[data-tip]在 IE8 下无效，得用[data-tip]加 polyfill 或换 class 控制
怎么让带 data-tip 的元素显示 tooltip 样式
直接用 [data-tip] 就够了，不需要判断值、也不用加引号或等号。只要属性存在，样式就生效。
- 基础样式示例：
[data-tip] { position: relative; }<br>[data-tip]::after {<br> content: attr(data-tip);<br> position: absolute;<br> top: -24px;<br> left: 50%;<br> transform: translateX(-50%);<br> background: #333;<br> color: #fff;<br> padding: 4px 8px;<br> border-radius: 4px;<br> font-size: 12px;<br> white-space: nowrap;<br>} - 只对按钮生效更安全：
button[data-tip]，避免误匹配其他带data-tip的元素 - 空值也匹配：
<span data-tip="">文本</span>会被[data-tip]选中，但content: attr(data-tip)渲染为空字符串
如何动态控制 tooltip 显示/隐藏
靠切换属性存在性比切 class 更语义清晰，也避免样式冲突。
- 显示 tooltip：
el.setAttribute('data-tip', '正在加载...') - 隐藏 tooltip：
el.removeAttribute('data-tip')（不是设为空字符串，data-tip=""仍会匹配[data-tip]） - 别用
el.dataset.tip = ''：这会生成data-tip=""，但不等于移除属性；要彻底隐藏，必须调用removeAttribute - 兼容性注意：Firefox 和 Safari 对
attr()支持稳定，但旧版 Edge 对空attr(data-tip)返回空字符串而非undefined，建议 fallback 到content: ""+ JS 控制
容易被忽略的渲染时机问题
JS 设置属性后，CSS 不是立刻响应的——尤其在 React/Vue 等框架里，属性更新和样式计算可能跨帧。
- 调试技巧：在 DevTools 的 Elements 面板里手动右键添加
data-tip属性，看样式是否立即出现；如果能，说明 JS 更新没同步到 DOM - 强制同步方案（慎用）：
el.setAttribute('data-tip', tipText); el.offsetHeight;—— 触发重排，确保属性写入完成 - 更稳妥做法：把 tooltip 控制逻辑封装进自定义 Hook 或指令，统一处理属性设置与渲染节奏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
