Popover 位置

你可以使用 sidealign 选项控制弹出窗口的位置。side 选项控制弹出窗口显示在元素的哪一侧,align 选项控制弹出窗口与元素的对齐方式。

¥You can control the popover position using the side and align options. The side option controls the side of the element where the popover will be shown and the align option controls the alignment of the popover with the element.

注意:Popover 足够智能,可以自行调整以适应视口。因此,如果你将 side 设置为 left,将 align 设置为 start,但弹出窗口无法适应视口,它将自动调整自身以适应视口。请考虑高亮并将浏览器滚动到下面的元素,以查看实际效果。

¥Note: Popover is intelligent enough to adjust itself to fit in the viewport. So, if you set side to left and align to start, but the popover doesn’t fit in the viewport, it will automatically adjust itself to fit in the viewport. Consider highlighting and scrolling the browser to the element below to see this in action.

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

const driverObj = driver();
driverObj.highlight({
  element: '#left-start',
  popover: {
    title: 'Animated Tour Example',
    description: 'Here is the code example showing animated tour. Let\'s walk you through it.',
    side: "left",
    align: 'start'
  }
});

Use the buttons below to show the popover.