单点高亮

如果不需要完整的分步导览，只想解释页面上的一个元素，可以使用 highlight()。

highlight() 适合新功能提示、按钮说明、表单字段解释、空状态引导等场景。

基本用法

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

const driverObj = driver();

driverObj.highlight({
  element: "#export-button",
  popover: {
    title: "导出数据",
    description: "点击这里可以把当前筛选结果导出为 CSV 文件。",
    side: "bottom",
    align: "end",
  },
});

highlight() 接收的对象和 steps 中的单个 step 很像，都可以设置 element 和 popover。

点击按钮后显示提示

更常见的做法是给帮助按钮绑定事件：

const driverObj = driver();

document.querySelector("#show-export-help").addEventListener("click", () => {
  driverObj.highlight({
    element: "#export-button",
    popover: {
      title: "导出数据",
      description: "导出内容会包含当前筛选条件下的所有记录。",
    },
  });
});

代码演示

点击演示中的“说明导出”按钮，可以看到只针对一个按钮的单点高亮。

在线代码演示

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Driver.js 单点高亮演示</title>
  <link rel="stylesheet" href="/driver-js/vendor/driver.css">
  <style>
    body {
      margin: 0;
      background: #f8fafc;
      color: #172033;
      font-family: Arial, "Microsoft YaHei", sans-serif;
    }
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 22px;
}

.toolbar,
.table {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
}

.title {
  font-size: 18px;
  font-weight: 800;
}

.actions {
  display: flex;
  gap: 10px;
}

button {
  cursor: pointer;
  border-radius: 6px;
  padding: 9px 13px;
  font-weight: 700;
}

.secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.primary {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
}

.table {
  overflow: hidden;
}

.row {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 14px;
}

.row.head {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
}

.row:last-child {
  border-bottom: 0;
}

</style>
</head>
<body>
<main class="wrap">
<section class="toolbar">
<div class="title">订单列表</div>
<div class="actions">
<button id="show-export-help" class="secondary" type="button">说明导出</button>
<button id="export-button" class="primary" type="button">导出 CSV</button>
</div>
</section>
&lt;section class=&quot;table&quot;&gt;
  &lt;div class=&quot;row head&quot;&gt;&lt;span&gt;订单&lt;/span&gt;&lt;span&gt;状态&lt;/span&gt;&lt;span&gt;金额&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;&lt;span&gt;#A1024 网站订阅&lt;/span&gt;&lt;span&gt;已支付&lt;/span&gt;&lt;span&gt;¥ 299&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;&lt;span&gt;#A1025 设计服务&lt;/span&gt;&lt;span&gt;待确认&lt;/span&gt;&lt;span&gt;¥ 1,200&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;&lt;span&gt;#A1026 域名续费&lt;/span&gt;&lt;span&gt;已支付&lt;/span&gt;&lt;span&gt;¥ 88&lt;/span&gt;&lt;/div&gt;
&lt;/section&gt;

</main>
<script type="module">
import { driver } from "/driver-js/vendor/driver.js.mjs";
const driverObj = driver({
  showButtons: [&quot;close&quot;],
});

document.querySelector(&quot;#show-export-help&quot;).addEventListener(&quot;click&quot;, () =&gt; {
  driverObj.highlight({
    element: &quot;#export-button&quot;,
    popover: {
      title: &quot;导出当前列表&quot;,
      description: &quot;导出内容会包含当前筛选条件下的所有订单，适合做离线核对。&quot;,
      side: &quot;bottom&quot;,
      align: &quot;end&quot;,
    },
  });
});

</script>
</body>
</html>

首次展示新功能

新功能上线后，可以只对未看过的用户展示一次：

const FEATURE_KEY = "feature-export-2026-09";
const driverObj = driver();

if (!localStorage.getItem(FEATURE_KEY)) {
  driverObj.highlight({
    element: "#export-button",
    popover: {
      title: "新增导出功能",
      description: "现在可以直接导出当前列表数据。",
    },
  });

  localStorage.setItem(FEATURE_KEY, "1");
}

如果你的应用有用户系统，可以把“是否展示过”记录到服务端，而不是只放在当前浏览器。

高亮 DOM 元素

element 不只能写字符串，也可以传入真实 DOM 元素：

const button = document.querySelector("#save-button");

if (button) {
  driverObj.highlight({
    element: button,
    popover: {
      title: "保存",
      description: "保存后，修改会立即对团队成员可见。",
    },
  });
}

在组件化框架中，这种写法常和 ref 一起使用。

关闭当前高亮

用户可以通过内置按钮关闭高亮。代码中也可以调用实例方法销毁当前引导：

driverObj.destroy();

例如路由切换、弹窗关闭、用户权限变化时，应主动清理当前高亮，避免遮罩停留在错误页面。

单点提示的写作建议

建议	示例
说明用途	“点击这里可以导出当前列表”
说明条件	“只有管理员可以看到这个入口”
说明后果	“删除后不可恢复，请谨慎操作”
避免空话	不要只写“这是一个按钮”

单点提示要短。用户点开之后，应该立刻知道下一步做什么。