按钮title显示后光标从pointer变default的原因及解决方法

问题描述 #

当按钮带有title属性时，一旦原生的title提示框显示，光标会从设置的pointer变为default。此现象仅在特定环境下出现，不少人无法复现。

代码示例 #

CSS代码 #

button{
  cursor: pointer;
}

HTML代码 #

<button title='Title'>Hover over me!</button>

原因分析 #

这是Chrome浏览器在macOS系统上的特定行为：当浏览器触发原生的title提示框（tooltip）时，这个提示框属于系统级UI元素，此时系统会临时接管光标样式，覆盖浏览器通过CSS设置的cursor: pointer，导致光标变为默认的default样式。

解决方法 #

方法1：自定义tooltip替代原生title（推荐） #

通过自定义HTML+CSS实现tooltip，完全控制样式和光标行为，避免系统原生tooltip的干扰：

修改后的代码

<button class="custom-tooltip-btn">Hover over me!
  <span class="custom-tooltip">Title</span>
</button>

.custom-tooltip-btn {
  cursor: pointer;
  position: relative;
}
.custom-tooltip {
  display: none;
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.custom-tooltip-btn:hover .custom-tooltip {
  display: block;
}

这种方式下，hover时光标始终保持pointer，因为自定义tooltip是页面内元素，不会触发系统级的光标样式覆盖。

方法2：强制CSS优先级（效果不稳定） #

尝试通过!important强制锁定hover状态的光标样式，但由于这是系统级行为，部分场景可能无法生效：

button:hover {
  cursor: pointer !important;
}

运行环境 #

• MacBook Pro
• macOS Ventura 13.3.1(a)
• Chrome Version 114.0.5735.198 (Official Build) (x86_64)

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