如何将Tooltip提示文本从CSS转移至HTML以实现多变体需求？

完全不用写一堆重复的CSS类，只需要借助HTML的自定义data属性，配合CSS的attr()函数就能实现把提示文本放在HTML里的需求。

具体实现步骤： #

1. HTML结构：给需要tooltip的元素添加自定义data属性（比如data-tooltip），把提示文本直接写在属性值里：

<button class="tooltip-trigger" data-tooltip="bottom1">Hover看提示</button>
<button class="tooltip-trigger" data-tooltip="bottom2">另一个Hover按钮</button>
<button class="tooltip-trigger" data-tooltip="这是自定义的提示文本">第三个按钮</button>

2. CSS样式：统一写一套tooltip的基础样式，用attr(data-tooltip)直接读取HTML里的文本作为伪元素的内容：

.tooltip-trigger {
  position: relative;
  padding: 6px 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
}

/* hover时显示tooltip */
.tooltip-trigger:hover::after {
  content: attr(data-tooltip); /* 核心：读取HTML的data属性值 */
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f2937;
  color: #f9fafb;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
  white-space: nowrap;
}

额外优势： #

• 不用再为不同提示文本创建新的CSS类，所有tooltip共享同一套样式
• 提示文本的修改直接在HTML里完成，不用碰CSS，维护效率更高
• 还能扩展更多自定义属性，比如data-tooltip-pos="top"，配合CSS实现不同方向的tooltip：

.tooltip-trigger[data-tooltip-pos="top"]:hover::after {
  bottom: auto;
  top: -28px;
}

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