title属性是最简单直接的提示方式，支持所有html元素且无需js/css，但样式不可控、移动端不稳定；aria-label/labelledby专用于无障碍提示；自定义tooltip需html+css+js实现，须兼顾可访问性与多端兼容。
title 属性是最简单直接的提示方式
几乎所有 HTML 元素都支持 title 属性，鼠标悬停时浏览器会自动显示原生 tooltip。它不需要任何 JS 或 CSS，兼容性极好（IE6+），但样式不可控、无法选中文本、移动端表现不稳定（iOS Safari 基本不触发）。
常见用法示例：
<button title="点击后将保存当前设置">保存</button> <input type="text" title="请输入 6~20 位字母或数字"> @@##@@
- 只适合简短、非关键提示；过长文本会被截断或换行混乱
- 不能包含 HTML 标签，纯文本渲染
- 在屏幕阅读器中会被读出，对无障碍友好，但要注意措辞简洁
使用 aria-label 或 aria-labelledby 控制辅助提示
当元素本身没有可见文本（如图标按钮），或需要更精确地控制屏幕阅读器播报内容时，aria-label 是首选。它不产生视觉 tooltip，但能确保语义正确。
示例：
<button aria-label="删除这条消息"><i class="icon-delete"></i></button> <input aria-labelledby="email-desc" type="email"><p id="email-desc">请输入用于接收验证邮件的地址</p>
-
aria-label优先级高于元素内文本，慎用于已有可见文字的按钮 -
aria-labelledby指向页面中真实存在的元素 ID，适合复用提示文案 - 两者都不触发鼠标悬停 tooltip，仅作用于辅助技术
自定义 tooltip 需要 HTML + CSS + 少量 JS
要实现可样式化、支持 HTML 内容、响应式显示的提示，必须脱离 title，改用自定义结构。核心是：一个触发元素 + 一个带 role="tooltip" 的浮层 + 显隐逻辑。
基础结构示例：
<button data-tooltip="支持 <strong>加粗</strong> 和换行">帮助</button> <div class="tooltip-popper" role="tooltip" hidden> <div class="tooltip-content"></div> </div>
- 用
hidden属性或display: none初始隐藏浮层 - JS 中监听
mouseenter/focus显示，mouseleave/blur隐藏，注意添加防抖和延迟关闭（避免误触） - 务必加上
role="tooltip"和aria-hidden="true/false"同步控制可访问性 - 位置计算建议用
getBoundingClientRect()，避免依赖第三方库
React/Vue 等框架中别直接操作 DOM 绑定 title
在组件化环境中，硬写 title 属性看似省事，但容易被框架的 diff 机制忽略更新，尤其在动态提示场景下（比如表单校验错误实时变化）。更可靠的方式是封装成受控组件。
- React 中推荐用
useState管理 tooltip 文本，配合useEffect同步到 DOM 属性或自定义浮层 - Vue 中避免
v-bind:title="dynamicTip"在复杂条件分支下失效，改用v-tooltip指令或组合式 API 显式控制 - 所有自定义 tooltip 必须处理键盘焦点流（
Tab进入/离开时显隐）和 ESC 关闭逻辑，否则破坏可访问性
真正麻烦的不是显示提示，而是让提示在各种输入方式（鼠标、键盘、触摸）、各种设备（桌面、平板、折叠屏）、各种辅助技术下行为一致。多数项目卡在这一步，而不是写不出浮层效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
