# Popover
Rich content in a floating panel anchored to a trigger.
Source: [popover.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/popover.tsx)
```tsx
import { CopyIcon, ShareIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";
import { toast } from "@/components/ui/toast";
export default function PopoverBasic() {
return (
}>
Share
Share “Mobile app”Anyone with the link can view this project.
);
}
```
## Installation
Add the registry, once per project:
```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```
Then add the component:
```bash
npx shadcn@latest add @jarvis/popover
```
## Usage
```tsx
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";
export function DetailsPopover() {
return (
}>Details
Website redesign18 of 28 tasks done.
);
}
```
Unlike a [Dialog](https://ui.jarv.is/components/dialog.md), a popover leaves the rest of the page interactive. `side` and
`align` on `PopoverContent` set its position.
## Composition
- `Popover`
- `PopoverTrigger`
- `PopoverContent`
- `PopoverHeader`
- `PopoverTitle`
- `PopoverDescription`
## Examples
### Form controls
Set a `w-*` class on `PopoverContent` to fit its content.
```tsx
import { ListFilterIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldItem, FieldLabel, FieldSeparator } from "@/components/ui/field";
import {
Popover,
PopoverContent,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
const filters = [
{ value: "all", label: "All tasks" },
{ value: "mine", label: "Assigned to me" },
{ value: "unassigned", label: "Unassigned" },
];
export default function PopoverFormControls() {
return (
}>
Filter
Filter tasks
{filters.map(({ value, label }) => (
{label}
))}
Include completed
);
}
```
### Infotip
`openOnHover` on `PopoverTrigger` opens the popover on hover as well as click. Unlike a
[Tooltip](https://ui.jarv.is/components/tooltip.md), it works on touch screens and with screen readers, and can hold a link.
Give the icon button an `aria-label`.
```tsx
import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverTrigger,
} from "@/components/ui/popover";
export default function PopoverInfotip() {
return (
Rate limit
}
>
Requests each API key can make per minute. Requests over the limit get a 429 response.{" "}
Learn more
` |
| `PopoverTitle` | [`Popover.Title`](https://base-ui.com/react/components/popover#title) |
| `PopoverDescription` | [`Popover.Description`](https://base-ui.com/react/components/popover#description) |
The tables leave out `className`, `style` and `render`. Parts built on Base UI take them as its [styling](https://base-ui.com/react/handbook/styling) and [composition](https://base-ui.com/react/handbook/composition) guides describe.
### Popover
| Prop | Type | Description |
| ----------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `defaultOpen?` | `boolean` | Whether the popover is initially open. To render a controlled popover, use the `open` prop instead. Default: `false` |
| `open?` | `boolean` | Whether the popover is currently open. |
| `onOpenChange?` | `((open: boolean, eventDetails: Popover.Root.ChangeEventDetails) => void)` | Event handler called when the popover is opened or closed. |
| `onOpenChangeComplete?` | `((open: boolean) => void)` | Event handler called after any animations complete when the popover is opened or closed. |
| `actionsRef?` | `React.RefObject` | A ref to imperative actions. - `unmount`: Ends the closing phase of the popover after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the popover completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. - `close`: Closes the popover imperatively when called. |
| `modal?` | `"trap-focus" \| boolean` | Determines if the popover enters a modal state when open. - `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. When `modal` is `true`, focus trapping is enabled only if `` is rendered inside ``. It can be visually hidden with your own CSS if needed, such as Tailwind's `sr-only` utility. When `modal` is `'trap-focus'`, render `` inside `` so touch screen readers can escape the popup. Default: `false` |
| `triggerId?` | `string \| null` | ID of the trigger that the popover is associated with. This is useful in conjunction with the `open` prop to create a controlled popover. There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set). |
| `defaultTriggerId?` | `string \| null` | ID of the trigger that the popover is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. |
| `handle?` | `Popover.Handle` | A handle to associate the popover with a trigger. If specified, allows external triggers to control the popover's open state. |
| `children?` | `PayloadChildRenderFunction \| React.ReactNode` | The content of the popover. This can be a regular React node or a render function that receives the `payload` of the active trigger. |
### PopoverTrigger
| Prop | Type | Description |
| --------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `nativeButton?` | `boolean` | Whether the component renders a native `