Popover Position

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.

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'
  }
});