纯 CSS 实现自定义悬浮提示框

介绍一种无 JavaScript 依赖的自定义悬浮提示框实现方案，全程基于纯 CSS 编写，通过 CSS2 与 CSS3 核心特性实现悬浮提示效果，轻量易扩展，兼容主流浏览器。

效果展示

技术特性

• 基于 CSS2 attr() 函数实现提示文本的动态获取，2019 年起主流浏览器已完全兼容；
• 采用 CSS3 calc() 函数实现提示框精准定位，若需兼容低版本不支持该函数的浏览器，可通过手动计算数值完成降级；
• 结合 CSS3 transform 与 transition 实现过渡动效，提升交互体验；
• 无 JavaScript 依赖，轻量高效，可通过 CSS 变量快速定制样式。

实现代码

HTML 结构

通过自定义 data-title 属性存储提示文本，标签可适配任意 HTML 元素，结构极简：

<element data-title="回到顶部"></element>

SCSS 源码

可复用 CSS 变量实现样式快速定制，包含提示框背景、内边距、箭头尺寸等，注释清晰且便于扩展，代码缩进统一：

// 提示框样式变量
$tooltip-fill-color:     rgba(#000, .8) !default; // 背景色
$tooltip-y-padding:      3px !default;            // 垂直内边距
$tooltip-x-padding:      2 * $tooltip-y-padding !default; // 水平内边距（1:2比例）
$tooltip-arrow-width:    5px !default;            // 箭头宽度/高度
$tooltip-line-height:    1.5 !default;            // 行高（用于垂直居中）

// 匹配所有含data-title属性的元素
*[data-title] {
  overflow: hidden;

  &:before,
  &:after {
    position: absolute;
    z-index: 10;
    opacity: 0;
    transform: translate3d(-50%, 0, 0); // 初始偏移，低版本可移除
    transition: 300ms ease;             // 过渡动效
  }
  
  // 提示框主体
  &:before {
    content: attr(data-title); // 重点：动态获取data-title属性值
    // 开始计算上浮偏移量，相加之后采用负数向上偏移）
    // 首先是字体的高度 1em * $tooltip-line-height
    // 然后是垂直方向上的内边距，注意分上下，所以是 $tooltip-y-padding * 2
    // 最后是小箭头的宽度（其实也是高度）
    top: calc(#{-1em * $tooltip-line-height} - #{$tooltip-y-padding * 2} - #{$tooltip-arrow-width});
    left: 50%;
    padding: $tooltip-y-padding $tooltip-x-padding;
    line-height: $tooltip-line-height;
    border-radius: 4px;
    background-color: $tooltip-fill-color;
    color: #fff;
    white-space: nowrap; // 禁止文本换行，字多的提示可换个表现方式
    box-sizing: content-box; // 重点：基于内容盒模型计算尺寸，因为无从得知字体大小
  }
  
  // 提示框箭头
  &:after {
    content: "\20";
    top: -1 * $tooltip-arrow-width;
    left: 50%;
    border: $tooltip-arrow-width solid transparent;
    border-top-color: $tooltip-fill-color; // 箭头颜色与主体一致
  }

  &:hover {
    overflow: visible;

    &:before,
    &:after {
      opacity: 1;
      transform: translate3d(-50%, -3px, 0); // 悬浮偏移，低版本可移除
    }
  }
}

编译后 CSS 代码

上述 SCSS 源码编译后的原生 CSS 代码，可直接引入项目使用，无需依赖预处理器：

*[data-title] {
  overflow: hidden;
}
*[data-title]:before, *[data-title]:after {
  position: absolute;
  z-index: 10;
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
  transition: 300ms ease;
}
*[data-title]:before {
  content: attr(data-title);
  top: calc(-1.5em - 6px - 5px);
  left: 50%;
  padding: 3px 6px;
  line-height: 1.5;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  white-space: nowrap;
  box-sizing: content-box;
}
*[data-title]:after {
  content: "\20";
  top: -5px;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}
*[data-title]:hover {
  overflow: visible;
}
*[data-title]:hover:before, *[data-title]:hover:after {
  opacity: 1;
  transform: translate3d(-50%, -3px, 0);
}

扩展优化

这仅仅是一个基础版悬浮提示框，仅满足核心交互需求，实际业务场景可进行扩展优化，以下为常用优化方案：

PC 端专属适配

若提示框仅需在 PC 端展示，可通过 CSS 媒体查询包裹所有样式，实现端侧适配：

@media screen and (min-width: 992px) {
  /* 上面的编译后 css 代码 */
}

其他扩展方向可根据需求实现：如多方向提示（上 / 下 / 左 / 右）、不同状态样式（成功 / 警告 / 错误）、适配移动端触摸事件等。

参考资料

1. hint.css：开源 CSS 提示框组件库，https://kushagra.dev/lab/hint/
2. 实现思路参考：https://www.cnblogs.com/esofar/p/8580034.html