title属性是HTML中唯一原生支持悬停提示的方案，仅显示静态文本，不支持样式、换行或图片；适合只读标注如“张三正在查看”，但Safari移动端常忽略；动态场景必须用JS驱动。
HTML里怎么用title实现最简协作光标提示
纯HTML不依赖JS也能显示悬停姓名，但仅限静态文本——title属性是唯一原生支持的方案。它会在鼠标悬停时触发系统级tooltip，内容就是你写的字符串。
常见错误是以为title能渲染富文本或响应式布局，其实不能：不支持换行、样式、图片，也不能监听鼠标移入事件。Chrome/Firefox对中文显示正常，但Safari在移动端常静默忽略title。
- 适合场景：协作编辑器中只读状态下的成员标注（比如“张三正在查看”）
- 写法示例：
<span title="李四（编辑中）">文档标题</span> - 注意空格和括号会被原样显示，别加HTML标签，否则变成字面量
用data-属性配合CSS伪元素做轻量卡片
想控制样式、加头像缩略图、支持换行？必须放弃title，改用data-* 存信息 + ::before/::after生成提示层。这是零JS、兼容IE11+的折中解法。
关键限制在于：伪元素内容只能是字符串，无法插入<img>；且悬停区域必须是块级或设置display: inline-block，否则伪元素定位会飘。
立即学习“前端免费学习笔记（深入）”；
- HTML示例：
<span class="cursor-badge" data-name="王五" data-role="审阅者"></span> - CSS要点：
.cursor-badge:hover::after { content: attr(data-name) "（" attr(data-role) "）"; } - 性能影响小，但每个悬停卡片都得单独写CSS规则，动态角色名要靠JS注入
为什么不用Popover或Tooltip组件
现代框架（React/Vue）里的Popover组件本质是JS控制DOM显隐，不是HTML能力。如果你项目已引入@floating-ui/dom或headlessui，那直接用它们的useFloating更稳——但代价是增加打包体积、需处理焦点管理和键盘导航。
容易踩的坑是：把协作光标当成普通tooltip处理，忽略了实时性。真实协作场景下，光标位置每秒可能更新多次，而CSS伪元素或title无法响应数据变化，必须JS驱动。
- 错误做法：用
title绑定Vue响应式变量，期望自动更新（实际只取初始值） - 正确路径：用
data-cursor-id存标识符，JS查表渲染真实卡片 - 兼容性提醒：
position: fixed在iOS Safari滚动时会错位，得用position: absolute+ 动态计算
悬停卡片里显示头像的小技巧
纯CSS做不到插入图片，但可以用CSS背景图模拟头像。前提是头像URL稳定可预测（比如https://avatar.example.com/uid_123.png），且服务端支持CORS。
难点在于尺寸控制和加载失败兜底。不要用background-image: url(...)直写，先用data-avatar存地址，再用JS检查图片能否加载，失败则回退到首字母。
- CSS示例：
.cursor-badge::before { background-image: url(attr(data-avatar)); } - 注意：
attr()只支持content属性，背景图需JS补全 - 更稳妥的做法：用
<span>内嵌<img>，设width: 16px; height: 16px;，并加onerror事件
协作光标提示看似简单，真正卡住人的永远是「实时性」和「跨端一致性」——HTML静态属性天生不响应变化，而协作状态每秒都在动。别试图用纯HTML扛动态需求，该上JS的地方就上。
