Popover

A floating panel that displays contextual information or UI controls.

Usage

import { Popover } from "@rhinolabs/ui"

export default function PopoverDemo() {
  return (
    <Popover>
      <Popover.Trigger>Open Popover</Popover.Trigger>
      <Popover.Content>
        <p>This is the popover content.</p>
      </Popover.Content>
    </Popover>
  )
}

Examples

Basic Popover

A simple popover with text content.

<Popover>
  <Popover.Trigger asChild>
    <Button variant="outline">Open</Button>
  </Popover.Trigger>
  <Popover.Content>
    <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" />
        </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" />
        </div>
      </div>
    </div>
  </Popover.Content>
</Popover>

With Custom Positioning

Popover with custom alignment and offset.

<Popover>
  <Popover.Trigger asChild>
    <Button>Settings</Button>
  </Popover.Trigger>
  <Popover.Content align="end" sideOffset={8}>
    <div className="flex flex-col space-y-2">
      <h4 className="font-medium">Settings</h4>
      <p className="text-sm text-muted-foreground">
        Manage your account settings and preferences.
      </p>
      <hr />
      <Button size="sm">View Profile</Button>
    </div>
  </Popover.Content>
</Popover>

Props

PopoverContent

Prop	Type	Default	Description
align	"start" | "center" | "end"	"center"	Alignment relative to trigger
sideOffset	number	4	Distance from trigger
side	"top" | "right" | "bottom" | "left"	-	Preferred side

All components accept their respective Radix UI Popover primitive props.

Design Considerations

• Keep content concise
• Position content logically
• Use appropriate triggers
• Consider mobile interactions
• Handle overflow properly

Accessibility

• Manages focus states
• Supports keyboard navigation
• Provides ARIA attributes
• Handles click outside
• Supports escape key