docs/src/content/guides/styling-popover.mdx

---
title: "Styling Popover"
groupTitle: "Examples"
sort: 10
---

import { CodeSample } from "../../components/CodeSample.tsx";

You can either use the default class names and override the styles or you can pass a custom class name to the `popoverClass` option either globally or per step.

Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRendered` callback to get the popover DOM element and do whatever you want with it.

We have added a few examples below but have a look at the [theming section](/docs/theming#styling-popover) for detailed guide including class names to target etc.

<CodeSample
  heading="Using CSS"
  buttonText={"Driver.js Website Theme"}
  config={{
    prevBtnText: '&larr; Previous',
    nextBtnText: 'Next &rarr;',
    doneBtnText: 'Done',
    showButtons: ['next', 'previous'],
    popoverClass: 'driverjs-theme'
  }}
  tour={[
    {
      element: '#demo-theme',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'h1',
      popover: {
        align: 'start',
        side: 'bottom',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'p a',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    }
  ]}
  id={"demo-theme"}
  client:load
>
  ```js
  import { driver } from "driver.js";
  import "driver.js/dist/driver.css";

  const driverObj = driver({
    popoverClass: 'driverjs-theme'
  });

    driverObj.highlight({
    element: '#demo-theme',
    popover: {
      title: 'Style However You Want',
      description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
    }
  });
  ```
</CodeSample>

<br/>

<CodeSample
  heading="Using Hook"
  buttonText={"Driver.js Website Theme"}
  config={{
    prevBtnText: '&larr; Previous',
    nextBtnText: 'Next &rarr;',
    doneBtnText: 'Done',
    showButtons: ['next', 'previous'],
  }}
  tour={[
    {
      element: '#demo-hook-theme',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'h1',
      popover: {
        align: 'start',
        side: 'bottom',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    },
    {
      element: 'p a',
      popover: {
        align: 'start',
        side: 'left',
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    }
  ]}
  id={"demo-hook-theme"}
  client:load
>
  ```js
  import { driver } from "driver.js";
  import "driver.js/dist/driver.css";

  const driverObj = driver({
  popoverClass: 'driverjs-theme'
});

  driverObj.highlight({
  element: '#demo-theme',
  popover: {
  title: 'Style However You Want',
  description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
}
});
  ```
</CodeSample>