# Popover

> Una tarjeta anclada a un control, con contenido interactivo.

```tsx
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, … } from "sebs7n-ui/popover"
```

## Ejemplos

### Contenido interactivo anclado a un control

```tsx
import { Button } from "sebs7n-ui/button"
import { Input } from "sebs7n-ui/input"
import { Label } from "sebs7n-ui/label"
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "sebs7n-ui/popover"

function Basico() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>Rango de fechas</PopoverTrigger>
      <PopoverContent className="w-72">
        <PopoverHeader>
          <PopoverTitle>Rango</PopoverTitle>
          <PopoverDescription>Se aplica al resumen del mes.</PopoverDescription>
        </PopoverHeader>
        <div className="flex flex-col gap-3">
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="pop-desde">Desde</Label>
            <Input id="pop-desde" size="sm" type="date" />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="pop-hasta">Hasta</Label>
            <Input id="pop-hasta" size="sm" type="date" />
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

## Props

### Popover

Hereda las props de `Popover.Root`.

Sin props propias: pasa todo al primitivo.

### PopoverContent

Hereda las props de `Popover.Popup` y `Popover.Positioner`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `align` | `"center" \| "start" \| "end"` | `"center"` | How to align the popup relative to the specified side. |
| `alignOffset` | `number \| OffsetFunction` | `0` | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"` | `"bottom"` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. |
| `sideOffset` | `number \| OffsetFunction` | `6` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `className` | `string` | — | — |

### PopoverDescription

Hereda las props de `Popover.Description`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### PopoverHeader

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### PopoverTitle

Hereda las props de `Popover.Title`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### PopoverTrigger

Hereda las props de `Popover.Trigger`.

Sin props propias: pasa todo al primitivo.

## Teclado

| Tecla | Qué hace |
|---|---|
| Enter · Espacio | Abre. |
| Escape | Cierra y devuelve el foco al trigger. |
| Tab | Recorre el contenido y sale. |

## Accesibilidad

- El trigger lleva `aria-expanded` y `aria-controls`, puestos por Base UI.
- A diferencia del `Tooltip`, el contenido es alcanzable con el teclado: puede tener inputs y botones.

## Reglas de uso

- Si el contenido es una lista de acciones, es un `DropdownMenu`. Si es solo texto de ayuda, un `Tooltip`.
- En mobile un popover ancho se sale de la pantalla: usá `Sheet`.

## Relacionados

[dropdown-menu](/docs/components/dropdown-menu.md) · [tooltip](/docs/components/tooltip.md) · [dialog](/docs/components/dialog.md)