title属性不支持HTML富文本，因浏览器按W3C规范将其纯文本转义；需改用data-tooltip-html+JS动态插入DOM方案，并注意定位、无障碍及响应式适配。
纯 title 属性不支持富文本，连换行都失效，更别说 HTML 标签、样式或交互——真要塞 或图标，必须放弃 title，改用 JS 动态插入 DOM 的方案。
为什么 title 不能渲染 HTML 内容
浏览器对 title 的处理是纯文本转义：所有尖括号、引号、标签都会被当作文本原样显示，title="斜体" 在提示框里就真的显示成六个字符。这不是兼容性问题，而是规范行为——W3C 明确要求 title 只接受 text content，不解析 markup。
常见错误现象：
-
title里写\n，结果还是单行挤在一起 - 移动端完全不触发，iOS Safari 直接忽略
title - 高对比度模式或屏幕阅读器下，内容可能被跳过或重复读取
data-tooltip + JS 插入 div 是最轻量的富文本起点
不用引入库，几行 JS 就能支持加粗、换行、小图标甚至按钮。核心是把富文本内容存在 data-tooltip（或更语义的 data-tooltip-html），再由 JS 创建真实 div 并 innerHTML 注入。
示例结构：
<button data-tooltip-html="点击保存 <strong>并同步</strong> 到云端<br><small>（30秒内可撤回）</small>">保存</button>
JS 控制逻辑要点：
- 监听
mouseenter和focus，避免只响应鼠标 - 创建
div后设置role="tooltip"和id，再用aria-describedby关联回触发元素 - 用
element.innerHTML = tooltipEl.dataset.tooltipHtml，不是textContent - 务必在 tooltip 显示前检查内容是否含脚本——富文本输入不可信时，应做白名单过滤（如只允
、）
定位和边界检测比样式更易出错
富文本高度不可预知，getBoundingClientRect() 算出的位置可能让 tooltip 被裁剪、遮挡，或掉出视口。别依赖固定偏移（如 top: -40px）。
关键处理步骤：
- 先
appendtooltip 到document.body，再调用getBoundingClientRect()测量自身宽高 - 计算目标元素位置时，加上
window.scrollX/window.scrollY，否则滚动后错位 - 判断 tooltip 是否超出右/下边界：若
left + width > window.innerWidth，则改用左对齐；若top + height > window.innerHeight，则改用上方定位 - 避免用
transform: translate做微调——它不影响布局流，但会干扰getBoundingClientRect()返回值
富文本 tooltip 的无障碍陷阱
富文本意味着更多样式、更多节点，也意味着更多可访问性风险。光有 role="tooltip" 不够。
必须同步处理：
- tooltip 元素初始状态设
aria-hidden="true"，显示时改为false，隐藏时切回true - 焦点不能落入 tooltip 内部（除非你明确支持键盘操作），需用
tabindex="-1"+inert属性（或手动管理focusable） - 如果 tooltip 含按钮或链接，必须提供关闭方式（如 ESC 键、点击空白处），并确保焦点回到触发元素
- 不要用
opacity: 0+visibility: hidden隐藏 tooltip——屏幕阅读器仍可能读取，要用display: none或aria-hidden="true"
最常被忽略的一点：富文本内容长度失控。一行提示写成三段落+两个图标，手机上直接撑满屏幕。上线前务必在窄屏下测试真实内容长度，并设定 max-width: 280px 和 word-break: break-word。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
