# Popover > Rich content in a panel next to the button that opens it, on the browser's Popover API. Source: https://shadleaf.dev/current/components/popover/ **Example: Popover.** A small form next to its trigger. Focus moves to the first field when it opens. ```html Open popover Dimensions Set the dimensions for the layer. Width Height ``` ## Built from parts A popover is `` with a `` and a ``, as in shadcn/ui. The content can hold a `` with `` and ``, and anything else: text, a small form, links. `` renders no element of its own: it gives the parts their ids. ```html Open popover Dimensions Set the dimensions for the layer. ... ``` The panel is a [popover](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API): it is drawn above everything else, Escape or a click outside closes it, and closing returns focus to the trigger. When it opens, focus moves to its first control (or to an element with `autofocus`), or to the panel when it has none; moving the focus out of it, with Tab past its last control for example, closes it. The trigger is a `` with `popovertarget` set to the popover's `id`; any other button can open it the same way. The panel is a non-modal dialog (`role="dialog"`): the rest of the page stays usable. The title names it and the description describes it (`aria-labelledby` and `aria-describedby`, with ids derived from the popover's `id`: `dimensions-title`). A popover without a title needs an `aria-label` on ``. `level` on the title makes it a heading. ## Position The panel opens below its trigger, centred on it. `side="top|right|bottom|left"` and `align="start|center|end"` on `` change that, and it flips to the other side when there is no room. `right` and `left` are the end and the start of a line, so they swap on a right-to-left page. **Example: Sides.** side puts it on a side of its trigger; it flips when there is no room there. ```html Top Opens above its trigger. Right Opens after its trigger. Bottom Opens below its trigger. Left Opens before its trigger. ``` It is placed with [CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning), which every current browser supports (Chrome and Edge 133, Safari 26, Firefox 147). In older ones the popover's small Alpine component places it from the trigger's position instead. ## A form in a popover, with htmx A form in the panel can post with htmx and swap only what it changes. An `HX-Trigger: sl-popover-close` response header closes the popover after a valid save, and focus returns to the trigger: ```html

Design

Rename Rename team
``` ```java @HxRequest @PostMapping("/team/name") public String rename(@Valid @ModelAttribute("renameForm") RenameForm form, BindingResult bindingResult, HtmxResponse htmxResponse, Model model) { if (bindingResult.hasErrors()) { return "team :: rename-form"; // the form swaps itself: the popover stays open } model.addAttribute("team", teamService.rename(form.getName())); htmxResponse.addTrigger("sl-popover-close"); return "team :: team-name-oob"; // the heading, with hx-swap-oob="true" } ``` htmx fires `sl-popover-close` on the form; it bubbles up to the popover, which closes. A popover nested in another closes only itself. Back never brings a popover back open: whether it is open is not part of the markup htmx saves in its history cache. ## Left out - **`PopoverAnchor`**: the popover is placed against its trigger. - **`PopoverPortal`**: the top layer does what the portal is for. - **State in the browser** (`open`/`onOpenChange`): the trigger opens it; the `sl-popover-close` event closes it. - **`modal`**: a popover never makes the rest of the page inert. Use a [dialog](https://shadleaf.dev/current/components/dialog.md) for that. ## Attributes ### sl:popover Attributes of ``: Rich content in a panel that opens from a button, on the browser's Popover API: it sits above the page next to its trigger, and Escape, a click outside or moving the focus out of it closes it. Holds a `sl:popover-trigger` and a `sl:popover-content`. Renders no element of its own. | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `id` | *string* | **required** | The popover's id, which the trigger points at with `popovertarget`. The title and description ids derive from it. | Every prop can also be set from an expression: `th:id="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended. ### sl:popover-trigger Attributes of ``: The button that opens and closes a `sl:popover`: a `sl:button` with `popovertarget` set to the popover. Any other attribute passes through to the `sl:button`. | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `variant` | `default`, `outline`, `ghost`, `destructive`, `secondary`, `link` | `default` | Visual style of the button, as on `sl:button`. | | `size` | `xs`, `sm`, `default`, `lg`, `icon`, `icon-xs`, `icon-sm`, `icon-lg` | `default` | Size of the button, as on `sl:button`. The `icon` sizes need an `aria-label`. | Every prop can also be set from an expression: `th:variant="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended. ### sl:popover-content Attributes of ``: The panel of a `sl:popover`, next to its trigger in the top layer. It is a non-modal dialog: name it with a `sl:popover-title` (in a `sl:popover-header`) or an `aria-label`. When it opens, focus moves to its first control. It flips to the other side when there is no room. | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `side` | `top`, `right`, `bottom`, `left` | `bottom` | The side of the trigger it opens on. `right` and `left` are the end and the start of a line: on a right-to-left page a `right` popover opens on the left. | | `align` | `start`, `center`, `end` | `center` | How it lines up with the trigger along that side. | Every prop can also be set from an expression: `th:side="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended. ### sl:popover-header Attributes of ``: The top of a `sl:popover-content`, holding `sl:popover-title` and `sl:popover-description`. `sl:popover-header` declares no props; every attribute passes through. ### sl:popover-title Attributes of ``: The title of a `sl:popover`, inside `sl:popover-header`, which names the popover (`aria-labelledby`). Its id derives from the popover's (`dimensions-title`). | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `level` | `1`, `2`, `3`, `4`, `5`, `6` | — | Heading level. With it the title is a heading (`role="heading"` and `aria-level`); without it, plain text, as in shadcn/ui. | Every prop can also be set from an expression: `th:level="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended. ### sl:popover-description Attributes of ``: Supporting text below a `sl:popover-title`, which describes the popover (`aria-describedby`). Its id derives from the popover's (`dimensions-description`). `sl:popover-description` declares no props; every attribute passes through. ## JavaScript A small Alpine component, `slPopover`, adds what the browser's popover lacks: `` renders as `