Windows端Chrome大光标场景下title提示被光标遮挡如何修复

问题场景 #

Windows系统Chrome浏览器存在如下渲染异常：

• 进入Windows系统「鼠标指针」设置页，将「更改指针大小」参数调整为较大值后，鼠标悬停在带有原生title属性的元素上时，title对应的提示文本会被绘制在光标区域下方，被大尺寸光标遮挡无法正常查看
• 注：Windows系统截图无法捕获大尺寸鼠标指针的实际显示效果，问题复现时的大尺寸指针为系统实际渲染效果，常规截图工具无法直接捕获

复现代码 #

<div title="foo">
some text
</div>

div {
  cursor: default;
}

咨询诉求 #

• 该问题是否有可行的修复方案？
• 是否可通过相关配置让Chrome始终将title提示绘制在光标沿屏幕高度方向的上方位置（非屏幕深度方向的层级置顶）？

回答 #

首先说结论：原生title触发的提示框是浏览器和系统接管渲染的原生UI控件，网页前端代码没有权限直接干预它的渲染位置、偏移逻辑，Chrome目前也没给普通用户开放可以调整原生提示框相对光标位置的公开配置。这个问题本质是Chrome在Windows平台没做好大尺寸系统光标适配的bug，不存在改个配置就能直接修复的方案。

目前可行的解决路径分两类：

普通用户可用的临时规避方案 #

• 给Chrome快捷方式添加启动参数--force-device-scale-factor=1后启动，会强制Chrome按默认光标尺寸计算提示框偏移，但这个参数会同步修改Chrome整个界面的显示缩放，实际用起来观感很差，实用性不高
• 换用Firefox、新版Edge这类浏览器，这两款目前已经适配了Windows大光标场景，会自动根据光标实际高度调整提示框的垂直位置，不会出现遮挡

站点开发者可用的彻底修复方案 #

完全放弃用原生title做提示，自己实现自定义提示组件：

• 绑定目标元素的mouseenter/mousemove/mouseleave事件，控制自定义提示浮层的显示、位置更新、隐藏逻辑
• 计算浮层位置的时候主动留够垂直方向的安全距离，有条件的可以读取系统当前光标实际尺寸动态计算坐标，保证浮层显示在光标不会挡住的位置
• 自定义提示做好之后把元素上原生的title属性删掉，避免两个提示同时弹出来

内容的提问来源于stack exchange，提问作者manymanymore