# Simple Highlight

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

Product tours is not the only usecase for Spotlight.js. You can use it to highlight any element on the page and show a popover with a description. This is useful for providing contextual help to the user e.g. help the user fill a form or explain a feature.

Example below shows how to highlight an element and simply show a popover.

Here is the code for above example:

```js
const tour = spotlight({
  popoverClass: "spotlight-theme",
  stagePadding: 4,
});

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

You can also use it to show a simple modal without highlighting any element.

Here is the code for above example:

```js
const tour = spotlight();

tour.highlight({
  popover: {
    description: "<img src='/animated-example.webp' style='height: 202.5px; width: 270px;' /><span style='font-size: 15px; display: block; margin-top: 10px; text-align: center;'>Yet another highlight example.</span>",
  }
})
```

Focus on the input below and see how the popover is shown.

Here is the code for the above example.

```js
const tour = spotlight({
  popoverClass: "spotlight-theme",
  stagePadding: 0,
  onDestroyed: () => {
    document?.activeElement?.blur();
  }
});

const nameEl = document.getElementById("name");
const educationEl = document.getElementById("education");
const ageEl = document.getElementById("age");
const addressEl = document.getElementById("address");
const formEl = document.querySelector("form");

nameEl.addEventListener("focus", () => {
  tour.highlight({
    element: nameEl,
    popover: {
      title: "Name",
      description: "Enter your name here",
    },
  });
});

educationEl.addEventListener("focus", () => {
  tour.highlight({
    element: educationEl,
    popover: {
      title: "Education",
      description: "Enter your education here",
    },
  });
});

ageEl.addEventListener("focus", () => {
  tour.highlight({
    element: ageEl,
    popover: {
      title: "Age",
      description: "Enter your age here",
    },
  });
});

addressEl.addEventListener("focus", () => {
  tour.highlight({
    element: addressEl,
    popover: {
      title: "Address",
      description: "Enter your address here",
    },
  });
});

formEl.addEventListener("blur", () => {
  tour.destroy();
});
```