弹层位置与按钮

弹层是 Driver.js 引导体验的核心。它既要靠近目标元素，又不能遮挡用户需要观察的内容。

设置弹层位置

常用位置由 side 和 align 组合决定：

const driverObj = driver({
  steps: [
    {
      element: "#filters",
      popover: {
        title: "筛选条件",
        description: "在这里按状态、负责人和时间范围筛选任务。",
        side: "right",
        align: "start",
      },
    },
  ],
});

side 表示弹层在目标元素的哪一侧，常见值包括 top、right、bottom、left。align 表示在该方向上的对齐方式，常见值包括 start、center、end。

位置选择建议

目标位置	推荐弹层位置
顶部导航	`bottom`
左侧菜单	`right`
右侧工具栏	`left`
页面底部按钮	`top`
大块内容区域	根据空白区域选择，避免挡住关键内容

如果页面响应式变化明显，建议在窄屏下减少步骤，或者把导览改成独立帮助页。

显示进度

多步骤引导可以开启进度显示：

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: "#nav",
      popover: {
        title: "导航",
        description: "从这里访问主要模块。",
      },
    },
    {
      element: "#profile",
      popover: {
        title: "个人设置",
        description: "修改头像、语言和通知偏好。",
      },
    },
  ],
});

进度能让用户知道还剩几步，适合 3 步以上的导览。

自定义按钮文案

Driver.js 支持配置按钮显示和文案。常见做法是把按钮翻译成中文：

const driverObj = driver({
  nextBtnText: "下一步",
  prevBtnText: "上一步",
  doneBtnText: "完成",
  steps: [
    {
      element: "#create-project",
      popover: {
        title: "创建项目",
        description: "从这里创建你的第一个项目。",
      },
    },
  ],
});

如果只做单点提示，可以隐藏不需要的按钮，只保留关闭或完成按钮。

const driverObj = driver({
  showButtons: ["close"],
});

控制关闭行为

有些业务希望用户必须看完关键引导，有些则允许随时关闭。可以根据场景调整：

const driverObj = driver({
  allowClose: true,
  overlayClickBehavior: "close",
});

建议多数产品保留关闭能力。强制用户看完整个导览，往往会让体验变差。

滚动到目标元素

当目标元素不在当前视口内时，Driver.js 可以滚动到目标区域。实际项目中要注意：

目标元素必须已经渲染。
固定头部可能遮挡高亮区域。
长列表中的虚拟滚动元素可能不存在于 DOM 中。

如果元素是异步加载的，先参考动态元素与异步引导。