---
title: "Popover — React"
canonical: https://sky-ui.cf.sky.com/components/popover/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Popover — React

The Popover displays supplementary content on top of another.

```js
import { Popover } from '@sky-uk/ui-core';
```

---

The `Popover` component triggers an overlay to present related additional information that can't be accommodated directly on a page.

```tsx
<Popover>
    <Popover.Control>
        <Button $variant="tertiary">Tell me more</Button>
    </Popover.Control>

    <Popover.Content>
        <p>Nec vivamus commodo volutpat dapibus condimentum phasellusNec</p>
    </Popover.Content>
</Popover>
```

---

## Props

### $placement

- `bottom-left`
- `bottom-center`
- `bottom-right`

### $popoverWidth

By default the width of the popover is set to `auto`. This will either mach the smaller of the `Popover.Control` or content width. If you want to set a fixed width, you can use the `$popoverWidth` prop.

```tsx
<Popover $popoverWidth="280px">
    <Popover.Control>
        <Button $variant="tertiary">Tell me more</Button>
    </Popover.Control>

    <Popover.Content>
        <p>Nec vivamus commodo volutpat dapibus condimentum phasellusNec</p>
    </Popover.Content>
</Popover>
```