Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Popover

Floating content panel anchored to a trigger element

## Example​

    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​

Floating content panel anchored to a trigger element

Source: `packages/appkit-ui/src/react/ui/popover.tsx`

### Props​

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

### Usage​

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

    <Popover /* props */ />

## PopoverAnchor​

Source: `packages/appkit-ui/src/react/ui/popover.tsx`

### Props​

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

### Usage​

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

    <PopoverAnchor /* props */ />

## PopoverContent​

Source: `packages/appkit-ui/src/react/ui/popover.tsx`

### 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​

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

    <PopoverContent /* props */ />

## PopoverTrigger​

Source: `packages/appkit-ui/src/react/ui/popover.tsx`

### Props​

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

### Usage​

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

    <PopoverTrigger /* props */ />