不写一行JS！纯CSS如何读取HTML属性实现Tooltip

前言

日常开发中，Tooltip（提示框）是非常常见的。正常实现方式是依赖JavaScript监听hover事件，动态计算位置并插入DOM元素。

但你知道不？纯CSS其实也能"读取"HTML元素上的属性值，配合伪元素生成动态Tooltip，全程无需一行JavaScript代码！

本文将带你使用纯css实现Tooltip。

1. 实现思路

通过HTML原生的data-*属性存储提示内容，利用CSS的attr()函数读取属性值，再结合伪元素::after中的content属性渲染提示框，从而实现一个轻量的动态Tooltip方案。

具体说明下：

1.1 自定义属性

HTML5为所有元素提供了data-*自定义属性（如data-tooltip）。特点是：

纯HTML原生支持：无需JavaScript即可直接定义
语义化存储 ：通过属性名（如tooltip）明确标识存储的内容用途
CSS/JS均可访问 ：既可以被CSS的attr()函数读取，也能通过JavaScript的datasetAPI获取。

1.2 CSS的属性读取器：attr()函数

CSS的attr()函数是一个"能获取指定HTML属性的值，并在CSS规则中使用。

例如：

css 复制代码

div::after {
  content: attr(data-tooltip); /* 读取data-tooltip属性的值作为内容 */
}

目前attr()最稳定且广泛支持的场景是配合伪元素（如::before/::after）的content属性，这是实现Tooltip的关键。

当然不用担心兼容性，基本全部支持：

2. 纯CSS实现

话不多说，直接上代码：

xml 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>纯 CSS Tooltip</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      margin: 20px;
      padding: 10px 15px;
      background: #28a745;
      color: white;
      border-radius: 4px;
      cursor: pointer;
    }

    .tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 5px;
      padding: 5px 10px;
      background: #333;
      color: white;
      font-size: 12px;
      white-space: nowrap;
      border-radius: 4px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      z-index: 10;
    }

    .tooltip:hover::after {
      opacity: 1;
      visibility: visible;
    }
  </style>
</head>
<body>
  <div class="tooltip" data-tooltip="这是一个纯 CSS 提示">悬停我</div>
</body>
</html>

✅ 这种方式不依赖 JavaScript 或框架，适合简单的、静态的提示需求。

效果：

3. 总结

最后总结一下：纯CSS通过读取HTML的data-*属性（attr()函数）+ 伪元素渲染（::after），配合定位与动画，即可实现无需JS的动态Tooltip，兼容性完全不用担心。

如有错误，请指正O^O!