如何让abbr标签不显示默认title提示？求纯CSS解决方案

要隐藏默认的title提示，只显示自定义样式的提示，纯CSS可以通过控制鼠标事件的传递来实现，核心思路是让<abbr>元素本身不接收鼠标事件（避免触发默认title提示），用伪元素承接鼠标hover事件并展示自定义提示。

修改后的CSS代码如下：

abbr[class*=bright]{
  color: black;
  background: yellow;
  position:relative;
  cursor:help;
  /* 让元素本身不响应鼠标事件，避免触发默认title提示 */
  pointer-events: none;
}

/* 用伪元素覆盖整个<abbr>区域，承接鼠标hover事件 */
abbr[class*=bright]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

abbr[class*=bright]:hover::after{
  color: white;
  background: red;
  content:attr(title);
  position:absolute;
  bottom: 0; right: 0;
  transform: translate(100%, 100%);
  white-space: nowrap;
  /* 提示框不干扰鼠标事件传递 */
  pointer-events: none;
}

对应的HTML保持不变：

<abbr title="Here is the title, as you can see, the default one is still there" class="bright">test</abbr>

原理说明 #

• 给<abbr>设置pointer-events: none后，它将不再接收任何鼠标事件，自然不会触发默认的title提示框。
• 新增的::before伪元素完全覆盖原<abbr>区域，并设置pointer-events: auto，鼠标悬停时实际触发的是这个伪元素的hover状态，而它没有title属性，不会弹出默认提示。
• ::after伪元素的pointer-events: none确保提示框不会拦截鼠标事件，保证hover状态持续有效。

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