> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Popover

> Lightweight overlay anchored to a trigger element.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/LH5aXxXQjZcsU-Hh/images/ui/popover-light.png?fit=max&auto=format&n=LH5aXxXQjZcsU-Hh&q=85&s=e644c3a5eb1643c0e29a81637621224e" alt="Popover component preview (light)" width="400" data-path="images/ui/popover-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/popover.tsx`

## When to use

* Provide small forms, menus, or tips anchored to a button or icon.
* Use when a full dialog is too heavy and a tooltip is too limited.

## Usage

```tsx theme={null}
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger className="rounded-md border px-3 py-1.5">Open</PopoverTrigger>
      <PopoverContent className="w-64">
        <div className="text-sm">Small form or menu here.</div>
      </PopoverContent>
    </Popover>
  );
}
```

## Key props

<ParamField path="PopoverContent.align" type="string" default="center">
  Positioning relative to the trigger: start | center | end.
</ParamField>

<ParamField path="PopoverContent.sideOffset" type="number" default="4">
  Offset from the trigger in pixels.
</ParamField>

<ParamField path="PopoverAnchor">
  Position the popover relative to a specific anchor element instead of the trigger.
</ParamField>

<Note>
  This component forwards all props from Radix Popover primitives (Root/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/popover](https://www.radix-ui.com/primitives/docs/components/popover)
</Note>

## Styling tip

Constrain width with `w-64` and keep content concise for a lightweight feel.

```tsx theme={null}
<PopoverContent className="w-64 text-sm">...</PopoverContent>
```

## Accessibility

* Use `PopoverTrigger` with a descriptive button; ensure keyboard navigation works.
* Content should be dismissible via Esc or click outside.