# Popover

Floating content panel anchored to a trigger element

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  Button,
  Input,
  Label,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@databricks/appkit-ui/react"

export default function PopoverExample() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="font-medium leading-none">Dimensions</h4>
            <p className="text-sm text-muted-foreground">
              Set the dimensions for the layer.
            </p>
          </div>
          <div className="grid gap-2">
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="width">Width</Label>
              <Input
                id="width"
                defaultValue="100%"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxWidth">Max. width</Label>
              <Input
                id="maxWidth"
                defaultValue="300px"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="height">Height</Label>
              <Input
                id="height"
                defaultValue="25px"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxHeight">Max. height</Label>
              <Input
                id="maxHeight"
                defaultValue="none"
                className="col-span-2 h-8"
              />
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

```

## Popover[​](#popover-1 "Direct link to Popover")

Floating content panel anchored to a trigger element

**Source:** [`packages/appkit-ui/src/react/ui/popover.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/popover.tsx)

### Props[​](#props "Direct link to Props")

| Prop           | Type                        | Required | Default | Description |
| -------------- | --------------------------- | -------- | ------- | ----------- |
| `open`         | `boolean`                   |          | -       | -           |
| `defaultOpen`  | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
| `modal`        | `boolean`                   |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Popover } from '@databricks/appkit-ui';

<Popover /* props */ />

```

## PopoverAnchor[​](#popoveranchor "Direct link to PopoverAnchor")

**Source:** [`packages/appkit-ui/src/react/ui/popover.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/popover.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop         | Type                    | Required | Default | Description |
| ------------ | ----------------------- | -------- | ------- | ----------- |
| `asChild`    | `boolean`               |          | -       | -           |
| `virtualRef` | `RefObject<Measurable>` |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { PopoverAnchor } from '@databricks/appkit-ui';

<PopoverAnchor /* props */ />

```

## PopoverContent[​](#popovercontent "Direct link to PopoverContent")

**Source:** [`packages/appkit-ui/src/react/ui/popover.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/popover.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop                     | Type                                                                        | Required | Default | Description                                                                                                                                                                               |
| ------------------------ | --------------------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `forceMount`             | `true`                                                                      |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.                                                                     |
| `asChild`                | `boolean`                                                                   |          | -       | -                                                                                                                                                                                         |
| `onEscapeKeyDown`        | `((event: KeyboardEvent) => void)`                                          |          | -       | Event handler called when the escape key is down. Can be prevented.                                                                                                                       |
| `onPointerDownOutside`   | `((event: PointerDownOutsideEvent) => void)`                                |          | -       | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.                                                                          |
| `onFocusOutside`         | `((event: FocusOutsideEvent) => void)`                                      |          | -       | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.                                                                                            |
| `onInteractOutside`      | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)`           |          | -       | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
| `onOpenAutoFocus`        | `((event: Event) => void)`                                                  |          | -       | Event handler called when auto-focusing on open. Can be prevented.                                                                                                                        |
| `onCloseAutoFocus`       | `((event: Event) => void)`                                                  |          | -       | Event handler called when auto-focusing on close. Can be prevented.                                                                                                                       |
| `align`                  | `enum`                                                                      |          | -       | -                                                                                                                                                                                         |
| `side`                   | `enum`                                                                      |          | -       | -                                                                                                                                                                                         |
| `sideOffset`             | `number`                                                                    |          | -       | -                                                                                                                                                                                         |
| `alignOffset`            | `number`                                                                    |          | -       | -                                                                                                                                                                                         |
| `arrowPadding`           | `number`                                                                    |          | -       | -                                                                                                                                                                                         |
| `avoidCollisions`        | `boolean`                                                                   |          | -       | -                                                                                                                                                                                         |
| `collisionBoundary`      | `Boundary \| Boundary[]`                                                    |          | -       | -                                                                                                                                                                                         |
| `collisionPadding`       | `number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>` |          | -       | -                                                                                                                                                                                         |
| `sticky`                 | `enum`                                                                      |          | -       | -                                                                                                                                                                                         |
| `hideWhenDetached`       | `boolean`                                                                   |          | -       | -                                                                                                                                                                                         |
| `updatePositionStrategy` | `enum`                                                                      |          | -       | -                                                                                                                                                                                         |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { PopoverContent } from '@databricks/appkit-ui';

<PopoverContent /* props */ />

```

## PopoverTrigger[​](#popovertrigger "Direct link to PopoverTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/popover.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/popover.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { PopoverTrigger } from '@databricks/appkit-ui';

<PopoverTrigger /* props */ />

```