# 弹层位置与按钮

URL: https://caijiao.org/driver-js/02-basics/03-popover-position
Source: docs/driver-js/02-basics/03-popover-position.md
Description: 讲解 Driver.js popover 的 side、align、按钮显示、按钮文案、进度展示和关闭行为配置。

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

## 设置弹层位置

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

```js
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` |
| 大块内容区域 | 根据空白区域选择，避免挡住关键内容 |

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

## 显示进度

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

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

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

## 自定义按钮文案

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

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

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

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

## 控制关闭行为

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

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

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

## 滚动到目标元素

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

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

如果元素是异步加载的，先参考 [动态元素与异步引导](/driver-js/05-practices/01-async-and-dynamic)。