attr()仅用于content属性注入文本，不能触发悬停或过渡；气泡显示/隐藏需用:hover控制opacity/visibility，transition必须写在常态规则中且作用于可动画属性。
attr() 本身不能触发悬停或过渡
attr() 只是读取 HTML 属性值并作为 CSS 值使用，它不监听属性变化、不响应交互、也不参与动画系统。你无法用 attr(data-tip) 直接驱动 :hover 气泡的显示/隐藏或 transition 动画——CSS 过渡必须作用在可动画的属性（如 opacity、transform）上，且这些属性得由伪类（如 :hover）显式设置。
实现动态提示气泡过渡的正确组合方式
真正可行的路径是：用 attr() 注入提示文本内容，用 :hover 控制容器状态，用 transition 控制视觉变化。关键在于分离「内容来源」和「行为控制」：
-
attr()只用于::before或::after的content，例如：content: attr(data-tip); - 气泡的显示/隐藏靠父元素
:hover触发子元素（如.tooltip::after）的opacity和visibility变化 - 过渡必须写在被动画的伪元素上，且需声明初始态（如
opacity: 0）和过渡属性（如transition: opacity 0.2s ease-in-out;） - 避免仅用
display: none/block—— 它不可动画，会导致突兀出现/消失
示例结构：
button[data-tip] {
position: relative;
}
button[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out, visibility 0.2s;
}
button[data-tip]:hover::after {
opacity: 1;
visibility: visible;
}
常见失效原因与修复
多数人卡在「写了 attr() 却没气泡」，问题往往不在 attr() 本身，而在上下文缺失：
-
attr()只对content生效，不能用于width、color等其他属性（除非是 CSS 自定义属性 +var()配合，但那是另一套机制） - 伪元素默认是 inline 级别，若未设
position: absolute或display: block，可能因尺寸为 0 而不可见 - 父元素未设
position: relative，导致absolute定位错乱，气泡飘到页面角落 -
transition写在:hover规则里（如button:hover::after { transition: ... }）—— 错！必须写在常态规则中（即button::after { transition: ... }），否则首次悬停无过渡 - HTML 中漏掉
data-tip属性，或拼写错误（如写成data-tips），attr()返回空字符串，气泡内容为空
需要动态更新提示时，attr() 就不够用了
如果提示文本需运行时变更（比如通过 JS 修改 data-tip），attr() 会自动更新内容，这点没问题；但若想让更新过程也带过渡（比如旧文字淡出、新文字淡入），纯 CSS 无解——attr() 不触发重绘动画，content 变更本身不可过渡。此时必须用 JS 控制类名切换，配合两个重叠的伪元素或真实子元素做交叉淡入，attr() 退居为静态内容注入工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
