# Simple Highlight

> Highlight any element on the page with Driver.js. Spotlight a single element and show a popover to deliver contextual help, beyond just product tours.

`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.

```js
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 <kbd>Escape</kbd> 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.

```js
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](https://driverjs.com/docs/teach-a-form.md).

For help that sits on the page until the user asks for it, use [hints](https://driverjs.com/docs/hints.md).