# Popover

Interactive content anchored to a trigger, such as a small form.

Source page: https://sproutboat.com/ikada/components/popover

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/popover.json
```
Or from the package: `import { Popover, PopoverContent, PopoverTitle, PopoverDescription } from "@sproutboat/ikada";`
## Usage
```tsx
import { Popover, PopoverContent, PopoverTitle, PopoverDescription } from "@/components/ikada/popover";

<Popover>
  <PopoverTrigger render={<Button />}>Rollout</PopoverTrigger>
  <PopoverContent side="right" align="center">
    <PopoverTitle>Rollout</PopoverTitle>
    <PopoverDescription>Send 10% of traffic to the new version first.</PopoverDescription>
  </PopoverContent>
</Popover>
```
## Examples
### Rollout
Interactive content anchored to its trigger. Plain text belongs in a Tooltip.
```tsx
<Popover>
  <PopoverTrigger render={<Button />}>Rollout</PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>Rollout</PopoverTitle>
    <PopoverDescription>Send 10% of traffic to the new version first.</PopoverDescription>
  </PopoverContent>
</Popover>
```
### Small form
PopoverClose closes it from inside, for a confirming button.
```tsx
<Popover>
  <PopoverTrigger render={<Button />}>Rename</PopoverTrigger>
  <PopoverContent className="flex flex-col gap-3">
    <Field label="Sprout name">
      <Input defaultValue="robin" />
    </Field>
    <div className="flex justify-end gap-2">
      <PopoverClose render={<Button size="sm" variant="ghost" />}>Cancel</PopoverClose>
      <PopoverClose render={<Button size="sm" variant="primary" />}>Save</PopoverClose>
    </div>
  </PopoverContent>
</Popover>
```
### Placement
Choose the side and alignment; it flips when there is no room.
```tsx
<Popover>
  <PopoverTrigger render={<Button />}>Regions</PopoverTrigger>
  <PopoverContent side="right" align="center">
    <PopoverTitle>Regions</PopoverTitle>
    <PopoverDescription>wren runs in eu-west and us-east.</PopoverDescription>
  </PopoverContent>
</Popover>
```
## Props
### PopoverContentProps
Also takes every prop of `Omit<ComponentProps<typeof BasePopover.Popup>, "className">`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| side? | `Side` | Which side of the trigger the popup opens on. Flips when there is no room. Default `bottom`. |
| align? | `Align` | How the popup lines up with the trigger along that side. Default `start`. |
| style? | `CSSProperties \| ((state: PopoverPopupState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, PopoverPopupState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### PopoverTitleProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: PopoverTitleState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, PopoverTitleState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### PopoverDescriptionProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: PopoverDescriptionState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, PopoverDescriptionState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/popover.tsx