Driver.js 是什么

Driver.js 是一个用于创建页面引导的 JavaScript 库。它会在页面上生成遮罩层，高亮某个目标元素，并在目标旁边显示说明弹层。多个高亮步骤串起来，就形成了常见的产品导览。

与把说明写在页面顶部不同，Driver.js 的提示跟随具体界面元素出现，用户能直接看到“这个按钮在哪里”“下一步该点哪里”“这个字段为什么重要”。

核心能力

能力	用途
元素高亮	聚焦一个按钮、表单项、导航入口或任意 CSS 选择器匹配的元素
分步导览	用 `steps` 定义多个步骤，再用 `drive()` 启动
单点提示	用 `highlight()` 对一个元素做即时说明
弹层控制	设置标题、描述、位置、按钮文本、进度和关闭行为
生命周期 hooks	在步骤切换、弹层渲染、销毁时执行自定义逻辑
样式定制	覆盖 CSS 变量或配置 `popoverClass` 做主题适配

Driver.js 适合解决什么问题

Driver.js 更适合“用户已经在页面里，但不知道某个界面如何使用”的问题，例如：

后台管理系统首次登录后的功能导览。
数据看板中新图表、新筛选器的功能说明。
编辑器、低代码平台、设计工具中的区域介绍。
新版本发布后，对关键变化做一次性提示。
内部系统中替代一部分培训文档。

不适合什么场景

Driver.js 不是完整的帮助中心，也不应该替代清晰的信息架构。

不适合场景	更好的做法
页面本身非常混乱	先优化页面结构和文案
大段概念教学	写教程、文档或帮助中心
用户频繁重复执行的流程	把流程本身做得更短、更直观
移动端屏幕过小且元素密集	优先简化页面，减少弹层遮挡

一个最小示例

下面的代码高亮 #create-project 按钮，并显示一段说明。

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();

driverObj.highlight({
  element: "#create-project",
  popover: {
    title: "创建项目",
    description: "从这里开始创建你的第一个项目。",
    side: "bottom",
    align: "start",
  },
});

学习建议

学习 Driver.js 时不要只记 API。更重要的是先想清楚引导目的：用户当前卡在哪里、完成什么动作才算成功、提示是否应该只出现一次。

一个好的页面引导通常很短，只解释用户当前最需要的信息。