content属性仅在伪元素中生效且静态求值，必须用button::after{content:attr(data-tip)}而非普通选择器；悬停显示应配合visibility/opacity过渡而非display，定位需防hover中断并合理设置pointer-events与z-index。
content 属性本身不能“动态”响应 hover —— 它只在伪元素（::before 或 ::after）中生效，且值在渲染时静态求值。所谓“hover 时显示”，本质是靠 :hover 触发伪元素的显隐切换，而非 content 实时重计算。
为什么 content: attr(data-tip) 必须搭配伪元素
content 是 CSS 中极少数**只能用于伪元素**的属性。写在普通选择器里（比如 button { content: "x"; }）完全无效，浏览器会直接忽略。常见错误就是漏掉 ::before 或 ::after，导致提示文字压根不出现。
- 必须用
button::after { content: attr(data-tip); }，不能写成button { content: attr(data-tip); } -
attr()只读取 HTML 属性原始值，不支持表达式、拼接或 fallback，content: "Tip: " attr(data-tip)是非法语法 - 如果
data-tip属性不存在或为空，content就是空字符串——不会报错，但也不会显示任何内容
悬停显示的关键：控制 visibility + transition 而非 display
用 display: none/block 切换会导致布局重排（reflow），提示框闪动或定位偏移。正确做法是用 visibility 和 opacity 配合 transition：
- 初始状态设
visibility: hidden; opacity: 0;，并加transition: opacity 0.2s, visibility 0.2s -
:hover::after中设visibility: visible; opacity: 1; - 避免只依赖
opacity：若没配visibility，鼠标移入移出时仍可能触发点击穿透或焦点丢失
定位提示框时最常踩的坑：hover 状态意外中断
当提示框用 position: absolute 悬浮在原元素右侧/上方，而两者之间有空隙时，鼠标从原元素移向提示框途中会短暂离开触发区域，:hover 立即失效，提示框消失——用户永远点不到、也看不全。
- 给提示框加
pointer-events: none;，让它不拦截鼠标事件 - 或者把提示框包裹进原元素内部（如
<span class="trigger"><button>操作</button><span class="tooltip">提示</span></span>），用相对定位更可控 - 慎用
top: 100%; margin-top: 4px：margin 会受外边距合并影响；优先用transform: translateY(4px)微调
真正难的是让提示框既稳定显示又不遮挡交互，这需要反复调试 z-index、pointer-events 和触发区域的连贯性——光写对 content 远远不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
