原生 title 属性无法实现过渡效果，因其由浏览器控制且不暴露 DOM；必须改用 aria-label + 自定义 div 或 Popover API 实现可动画、可访问的提示框。
用 title 属性加 CSS 无法实现过渡效果
HTML 原生的 title 提示框（鼠标悬停时浏览器自动弹出的小黄框）完全由浏览器控制，不暴露 DOM 节点，也不支持任何 CSS 动画或 transition。你写 transition: all 0.3s 完全无效，连 :hover 都不能作用于它。
所以，真要加过渡效果，必须放弃 title，改用自定义提示框。
用 aria-label + 自定义 div 实现可动画的提示框
核心思路：用语义化属性保留可访问性，用绝对定位的 div 模拟提示框，并控制其显隐与过渡。
- 给触发元素加
aria-label（供读屏器识别），同时用data-tip存提示文本，避免重复 - 用
:hover或 JS 控制一个.tooltip元素的opacity和transform - 必须设
pointer-events: none在提示框上，否则鼠标移过去会触发mouseleave导致闪退 - 过渡推荐用
opacity+transform: translateY()，比visibility或display更平滑且可动画
button[data-tip] {
position: relative;
}
button[data-tip]:hover::after {
content: attr(data-tip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%) translateY(8px);
opacity: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
}
button[data-tip]::after {
content: '';
opacity: 0;
transform: translateX(-50%) translateY(0);
/* 其他样式：背景、圆角、padding 等 */
}
focus 状态下也要支持键盘用户
仅靠 :hover 会漏掉键盘 Tab 进入的用户。必须补上 :focus 和 :focus-visible。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
:focus-visible更精准（避免鼠标点击后意外触发） - 确保提示框有足够对比度，且不遮挡焦点环
- 如果用 JS 实现，需监听
focusin/focusout，并用setTimeout防止快速切换时闪烁 - 按
Esc应该关闭提示框——这点原生title做不到，但自定义方案可以加
用 Popover API 是未来最简方案（但兼容性有限）
Chrome 114+ 支持原生 popover 属性，能直接绑定提示内容并支持 CSS 过渡：
<button popovertarget="my-tooltip">Hover me</button> <div id="my-tooltip" popover="auto">This fades in smoothly</div>
然后对 [popover] 元素设置：
[popover] {
transition: opacity 0.2s, transform 0.2s;
}
[popover][data-state="open"] {
opacity: 1;
transform: scale(1);
}
[popover][data-state="closed"] {
opacity: 0;
transform: scale(0.95);
}目前 Firefox 和 Safari 尚未支持，生产环境需降级到 JS 方案或 polyfill。别只看 MDN 示例就上线——检查 HTMLButtonElement.prototype.popovertarget 是否存在更稳妥。
真正麻烦的不是怎么动起来，而是动的时候不打断焦点流、不遮挡操作区域、不卡顿滚动，这些细节在小尺寸 tooltip 上特别容易翻车。
