前端开发中 title 属性的用途与基础
title 属性的定义与常见用途
在网页元素上使用title 属性，可以为该元素提供额外的文本信息，这些信息通常在鼠标悬停时以工具提示的形式显示，帮助用户更好地理解链接、图片或按钮的作用。
对于 链接、图片和可操作控件，添加 title 属性可以在没有额外说明文本时提供提示，但需要注意它并非替代性描述，而是补充信息的手段。
示例链接
浏览器行为与兼容性要点
浏览器默认会在鼠标悬停时显示与元素相关的 title 提示，但这一行为在不同浏览器之间存在细微差异，因此对外部提示的一致性依赖性较高。
在移动端和无鼠标设备上，title 提示往往不可用或难以触达，因此只依赖它来传达关键信息的做法存在可用性风险。
工具提示的无障碍实现与最佳实践
原生 title 与替代方案的权衡
使用 title 的优点在于实现快速、无额外脚本即可获得提示，但在无障碍设计方面存在局限，屏幕阅读器的行为可能不一致，移动设备也缺乏触控可用性。
因此，在需要稳定、可定制、易于被辅助技术读取的工具提示时，通常推荐采用自定义实现，结合无障碍属性来确保所有用户都能获得提示信息。
文档
实现可访问的自定义工具提示的要点
要点包括：通过aria-describedby将目标元素与提示元素关联；提示文本应具有 role="tooltip" 并可被屏幕阅读器读出；提示在聚焦或悬停时显现，且隐藏状态对键盘导航友好。
实现时应考虑提示的位置、对比度以及在页面滚动时的可见性，以避免遮挡其他内容或影响可读性。
/* 提示样式与显隐控制 */
.tooltip{ position: absolute; background: #333; color:#fff; padding:6px 8px; border-radius:4px;font-size:12px; opacity:0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events:none;
}
.tooltip-container:hover .tooltip, .tooltip-container:focus-within .tooltip{opacity:1; transform: translateY(0); pointer-events:auto;
}
// 简单的辅助功能增强：在聚焦/失焦时更新 aria-hidden
const btn = document.getElementById('infoBtn');
const tip = document.getElementById('infoTip');
btn.addEventListener('focus', () => tip.setAttribute('aria-hidden','false'));
btn.addEventListener('blur', () => tip.setAttribute('aria-hidden','true'));
在实际应用中，aria-describedby 能让现有控件与提示内容建立清晰的语义关联，role="tooltip" 则让辅助技术知道这是一个提示文本。通过 CSS 控制显隐与聚焦状态，可以实现跨设备一致的工具提示体验。
示例链接
我的资料
通过以上示例，可以看到title 属性虽然简单，但在需要更高可访问性和可控样式的场景，结合无障碍工具提示实现是一种更稳妥的选择。关键在于正确使用 aria-describedby、role="tooltip"、以及可聚焦、可控的显隐逻辑，以确保所有用户都能获取相同的提示信息。
