能否在CSS文件中为指定类的元素统一设置提示文本？

你提到的tooltip-text不是CSS的合法属性，CSS本身无法直接设置DOM元素的title属性（原生提示依赖这个属性），但可以通过伪元素模拟自定义tooltip的方式实现统一设置，无需修改每个HTML元素，也不需要JavaScript。

实现代码 #

CSS 样式 #

/* 给目标图片设置相对定位，作为伪元素的定位基准 */
img.abc {
  position: relative;
  /* 可选：给图片加光标提示可交互 */
  cursor: help;
}

/* 生成提示文本的伪元素 */
img.abc::after {
  /* 统一设置的提示内容，修改此处即可批量更新 */
  content: "click me, you fool!";
  /* 定位在图片上方居中 */
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  /* 自定义样式，可按需调整 */
  background-color: #222;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  /* 默认隐藏提示 */
  opacity: 0;
  pointer-events: none; /* 避免干扰图片本身的交互 */
  /* 添加入场过渡动画 */
  transition: opacity 0.2s ease;
}

/* 鼠标悬停时显示提示 */
img.abc:hover::after {
  opacity: 1;
}

对应HTML（无需修改原结构） #

<img src="..." class="abc">
<img src="..." class="abc">
<img src="...">
<img src="..." class="abc">

方案说明 #

1. 优势：完全通过CSS实现，后续修改提示文本只需调整content的值，无需逐个修改HTML元素，也不需要JS遍历操作。
2. 与原生title的区别：原生title的样式由浏览器控制，无法自定义；而伪元素方案可以完全自定义提示框的颜色、字体、位置、动画等细节。
3. 兼容性：现代浏览器均支持该方案，若需兼容IE8及以下老旧浏览器则不适用。

如果一定要使用原生title属性（依赖浏览器默认提示样式），那确实只能通过JavaScript遍历设置，或者逐个在HTML中添加title属性——CSS没有修改DOM属性的能力。

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