span 标签支持 title 属性，但提示显示受父容器聚焦性、css 裁剪、悬停区域及第三方库影响；原生 title 样式不可控、移动端无效、无障碍支持弱，推荐用 css + aria 实现可访问、可定制的 tooltip。
span 标签本身不支持 title 属性触发原生提示？
其实它支持——title 属性在 span 上是合法且被所有主流浏览器渲染的，但效果取决于父容器是否可聚焦、是否被包裹在交互元素中。常见误区是直接写 <span title="提示文字">文本</span> 却没看到提示，往往因为：
• 父级设置了 overflow: hidden 或裁剪了区域
• span 被设为 display: inline 且周围无足够空白，鼠标悬停区域太小
• 页面启用了自定义 tooltip 库（如 tippy.js），覆盖或禁用了原生行为
用 CSS 实现更可控的 hover 提示（推荐）
原生 title 提示样式不可控、延迟固定、无法选中文本。用纯 CSS 实现更灵活：
<span class="tooltip">悬停我<span class="tooltip-text">这是自定义提示</span></span>
对应 CSS：
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip-text {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 4px 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
关键点：
• 必须给 .tooltip 设 position: relative，否则 .tooltip-text 的绝对定位会相对于 body
• visibility + opacity 组合才能实现“真隐藏+淡入”，仅用 opacity 会导致悬停区域失效
• 移动端不触发 :hover，需额外加 focus-within 或 JS 支持
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
JavaScript 补充：解决移动端和键盘访问问题
纯 CSS 的 :hover 在手机上基本无效，且屏幕阅读器可能忽略 title。稳妥做法是加一层 JS 控制显隐，并绑定 focus/blur：
document.querySelectorAll('.tooltip').forEach(el => {
el.addEventListener('mouseenter', () => el.setAttribute('aria-expanded', 'true'));
el.addEventListener('mouseleave', () => el.setAttribute('aria-expanded', 'false'));
el.addEventListener('focus', () => el.setAttribute('aria-expanded', 'true'));
el.addEventListener('blur', () => el.setAttribute('aria-expanded', 'false'));
});
再配合 CSS：
• 把 .tooltip:hover .tooltip-text 改成 .tooltip[aria-expanded="true"] .tooltip-text
• 为 .tooltip 加 tabindex="0" 使其可聚焦
• .tooltip-text 加 role="tooltip" 和 id，关联到 aria-describedby 更佳
避免踩坑：title 属性不是万能的
即使只用原生 title，也要注意：
• 它不会换行，长文本会被截断或显示为一长串
• 不支持 HTML 内容，纯文本
• 在 macOS Safari 中，title 提示延迟比 Chrome 长得多
• 如果 span 位于 contenteditable 区域内，部分浏览器会禁用 title
• 屏幕阅读器对 title 的读取行为不一致，WCAG 不推荐依赖它传递关键信息
真正需要可靠提示时，CSS + ARIA 方案才是落地选择。别指望一个 title 属性扛起全部需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
