如何自定义HTML元素title属性样式 实现红色背景效果

核心说明 #

原生title属性触发的浏览器默认提示框是内置控件，不支持直接通过CSS修改样式，我们可以通过自定义属性+CSS伪元素的轻量方案实现完全可控的自定义提示效果，无需引入额外脚本。

实现代码 #

HTML代码 #

<!-- 新增data-title属性供伪元素调用，无需保留原title属性可直接删除 -->
<div title="Hi!" class="box" data-title="Hi!">Hi!</div>

CSS代码 #

.box {
  background-color: red;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  /* 开启定位作为伪元素的定位上下文 */
  position: relative;
}

/* 可选：元素无点击交互时可加这段，避免原生title提示和自定义提示同时出现 */
.box:hover {
  pointer-events: none;
}

/* 自定义提示框样式 */
.box::after {
  /* 读取自定义属性的值作为提示内容 */
  content: attr(data-title);
  /* 你需要的红色背景 */
  background-color: #ff0000;
  color: #ffffff;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 14px;
  position: absolute;
  /* 调整提示框显示位置，示例为元素正上方 */
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 999;
  /* 默认隐藏 */
  display: none;
}

/* hover时显示提示框 */
.box:hover::after {
  display: block;
}

扩展说明 #

• 如果需要调整提示框的位置、字体、圆角等样式，直接修改.box::after的CSS属性即可
• 如果元素需要绑定点击等交互事件，不要使用pointer-events: none的方案，可以在页面加载时把所有title属性的值迁移到data-title属性，再清空原title属性即可避免双提示问题
• 如果需要支持更复杂的交互（比如延时显示、气泡箭头、点击触发），可以补充少量JS逻辑，基础场景下上述纯CSS方案完全够用

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