title 属性无法实现自定义提示，因其不参与 dom 渲染且不支持样式控制；应改用 data-tip 配合伪元素方案，并补充移动端和无障碍支持。

title 属性根本不能“隐藏文字再显示提示”——它只是浏览器原生的悬停气泡，不参与 DOM 渲染流程，也不支持样式控制。想用 CSS 实现「悬停显示自定义提示」，必须绕开 title，改用 data-tip + 伪元素方案。

为什么不能直接用 title 做自定义提示

很多人误以为给元素加 title="xxx" 就能自由控制提示样式，结果发现：颜色改不了、位置调不动、延迟设不上、移动端点不触发、换行被忽略、HTML 标签当纯文本显示。更关键的是，title 的内容不会出现在 DOM 中，CSS 无法选中它，伪元素也无从下手。

data-tip + ::before/::after 是最轻量的替代方案

核心思路是把提示文本存进自定义属性，用 CSS 读取并渲染为伪元素浮层。这个方案不依赖 JS，兼容性好（IE11+），且完全可控。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• HTML 中写：<span data-tip="这是自定义提示">悬停我</span>
• CSS 中写：span[data-tip]:hover::after 生成提示框，content: attr(data-tip) 提取值
• 必须设置 position: relative 在宿主元素上，否则 absolute 定位会错乱
• 用 opacity + visibility 控制显隐，只设 opacity: 0 会导致鼠标穿透，点击不到下方元素
• 提示框默认在元素末尾右侧出现；要调整位置，改 top/left 或用 transform

移动端适配和可访问性容易被忽略

纯 CSS 悬停提示在触屏设备上基本失效——iOS Safari 和多数安卓浏览器不触发 :hover。如果需要响应式支持，得补 JS 监听 touchstart 切换 class，或直接改用 aria-describedby + role="tooltip" 配合 JS 显隐。

• 屏幕阅读器不会读 data-tip，必须手动绑定 aria-describedby 指向一个真实 id 的 div
• 若提示含重要操作信息（如“该操作不可撤销”），别只靠视觉提示，得同步写进 aria-label 或旁白文本
• 动画用 transition: opacity .2s 足够，避免用 transform 动画叠加导致 iOS 渲染卡顿

真正要“隐藏文字再显示提示”，title 是错路；data-tip 是起点，但离生产可用还差一层交互健壮性和无障碍兜底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！