最简悬浮提示用title属性，兼容好但不支持样式和移动端；自定义卡片推荐:hover+visibility避免重排；JS需防抖处理mouseleave；移动端必须降级为点击触发。
用 title 属性最简实现悬浮提示
多数场景下，不需要 JS 或 CSS 动画——浏览器原生 title 就能触发鼠标悬停显示简短文本。它自动处理显示/隐藏、延迟、位置偏移，且兼容所有现代浏览器和屏幕阅读器。
直接在用户信息容器（如 <div> 或 <span>）上加 title 属性即可：
<div class="user-card" title="张三｜前端工程师｜3年经验｜上海">张三</div>
注意：title 内容会被当作纯文本渲染，不支持换行、HTML 标签或样式；过长文字可能被截断或显示不全；移动端基本不触发（iOS Safari 默认禁用）。
用 :hover + visibility 实现自定义悬浮卡片
需要控制样式、支持多行内容、保持交互响应时，CSS :hover 是轻量可靠的选择。关键不是用 display: none/block（会触发重排），而是用 visibility: hidden/visible 配合 opacity 和 transition。
立即学习“前端免费学习笔记（深入）”；
结构要点：
- 把详细资料放在用户卡片内部，用
class="tooltip-content"包裹 - 卡片本身设为
position: relative，悬浮层设为position: absolute - 初始状态：
visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s -
:hover .tooltip-content中设visibility: visible; opacity: 1
这样既避免布局抖动，又保留元素占位，对无障碍友好（visibility: hidden 仍可被读屏软件访问，若需完全隐藏则加 aria-hidden="true"）。
JavaScript 控制悬浮层时必须处理 mouseleave 延迟
手写 JS 显示/隐藏悬浮卡片，最容易出问题的是鼠标快速划过多个卡片时，出现“残留显示”或“闪动”。根本原因是 mouseenter 立即显示，但 mouseleave 立即隐藏，没给用户留操作余地。
正确做法是加一个防抖延迟：
- 监听
mouseenter，立即显示卡片并清除旧的隐藏定时器 - 监听
mouseleave，启动setTimeout（建议 200–300ms），超时后才隐藏 - 每次新进入都调用
clearTimeout，确保只执行最后一次离开逻辑
别用 setTimeout 的返回值直接赋给全局变量——多个卡片共用一个 timer 变量会导致覆盖失效；每个卡片实例应维护自己的 hideTimer。
移动端适配不能只靠 :hover
CSS :hover 在 iOS 和 Android 大部分浏览器中仅在模拟桌面模式或极少数情况下生效，真机点击不会触发。如果业务必须支持手机端查看详情，得换思路：
- 改用点击触发（
click或tap），配合aria-expanded和role="tooltip"提升可访问性 - 或者加一层判断：检测
matchMedia('(hover: hover)')，有 hover 能力再启用悬浮逻辑，否则降级为点击展开 - 绝对不要依赖
:hover实现核心功能，比如“不悬停就看不到邮箱”——这会让手机用户直接卡死
真实项目里，hover 卡片常被当成“锦上添花”，但一旦设计成唯一入口，就会在微信内置浏览器、钉钉、飞书等 WebView 环境里彻底失灵。
