Delphi Design

A popover component for displaying floating content.

Default

Basic Popover

Usage

import { Popover, PopoverTrigger, PopoverContent, Button } from "@delphi/ui";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Info</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>Popover content here</p>
      </PopoverContent>
    </Popover>
  );
}

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`modal`	`boolean`	`false`	Whether to trap focus inside popover

PopoverContent Props

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side
`align`	`"start" \| "center" \| "end"`	`"center"`	Preferred alignment
`sideOffset`	`number`	`4`	Distance from trigger

Use popovers for interactive content that requires user action

Include a clear way to dismiss the popover

Use asChild on PopoverTrigger to preserve button semantics

Keep popover content focused and relevant to the trigger

Consider using modal={true} for critical flows

Use popovers for simple text hints — use Tooltip instead

Make popovers too large — use Dialog or Drawer for complex content

Nest popovers inside other popovers

Auto-dismiss popovers while user is interacting with content