Overlays

Popover

An anchored floating surface for lightweight contextual content.

PopoverView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Button, Popover } from "innate-ui";

export function PopoverDemo() {
  return (
    <Popover side="bottom" align="center">
      <Popover.Trigger>
        <Button>Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <h2>Popover Title</h2>
        <p>This is a popover.</p>
      </Popover.Content>
    </Popover>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

PopoverProps

Prop	Type	Default
`children`required Popover trigger, optional anchor, and content parts.	`JSX.Children`	`—`
`open` Whether the popover is open.	`JSX.ValueOrCell<boolean>`	`false`
`side` Preferred side of the anchor.	`JSX.ValueOrCell<PopoverSide>`	`"bottom"`
`align` Preferred alignment along the anchor edge.	`JSX.ValueOrCell<PopoverAlign>`	`"center"`
`sideOffset` Gap in pixels between the anchor and content.	`JSX.ValueOrCell<number>`	`8`
`collisionPadding` Viewport padding used when resolving collisions.	`JSX.ValueOrCell<number>`	`8`
`onOpenChange` Called when the popover requests an open-state change.	`(open: boolean, reason?: PopoverCloseReason) => void`	`—`
`triggerRef` Optional externally owned trigger element reference.	`SourceCell<HTMLElement \| null>`	`—`

Inspect the typed source →