Simple Highlight

highlight() shows a single step without a tour. Use it for contextual help: explain a feature, guide a form, or dim the page around one element.

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

const driverObj = driver({
  popoverClass: "driverjs-theme",
  stagePadding: 4,
});

driverObj.highlight({
  element: "#highlight-me",
  popover: {
    side: "bottom",
    title: "This is a title",
    description: "This is a description",
  },
});

A highlight popover has no buttons unless you ask for them with showButtons. The user closes it with Escape or a click on the overlay, and your code closes it with destroy(). Leave out popover to only dim the page around the element.

Without an Element

Leave out element and the popover shows in the middle of the screen, like a modal. The title and description take HTML.

driverObj.highlight({
  popover: {
    description:
      "<img src='/welcome.webp' width='270' />" +
      "<p>Yet another highlight example.</p>",
  },
});

To show help as the user moves through a form, see Teach a Form.

For help that sits on the page until the user asks for it, use hints.