# Popover

> Based on [Radix Popover](https://www.radix-ui.com/primitives/docs/components/popover)

The Popover component displays rich content in a floating panel that appears next to a trigger element. Unlike tooltips, popovers can contain interactive content like forms, buttons, and links.

## When to Use

Use Popover for:

* User profile dropdowns
* Quick edit forms
* Additional options or settings
* Preview cards
* Any interactive floating content

## Structure

The Popover component consists of several parts:

| Component           | Description                                      |
| ------------------- | ------------------------------------------------ |
| **Popover**         | The root component that manages open/close state |
| **Popover Trigger** | The element that opens the popover when clicked  |
| **Popover Content** | The floating panel containing your content       |
| **Popover Close**   | Optional button to close the popover             |

## How to Use

1. Drag a **Popover** component from Components > Radix onto your canvas
2. Customize the trigger (usually a button)
3. Add your content inside the Popover Content
4. Optionally add a Close button using Popover Close
5. Style the content panel and adjust positioning

## Properties

Some commonly used properties (see the Settings panel for all available options):

### Popover

| Property | Description                                                            |
| -------- | ---------------------------------------------------------------------- |
| **open** | Controls whether the popover is visible. Use for styling on the canvas |

### Popover Content

| Property        | Description                                         |
| --------------- | --------------------------------------------------- |
| **side**        | Preferred side: `top`, `right`, `bottom`, or `left` |
| **sideOffset**  | Distance in pixels from the trigger                 |
| **align**       | Alignment: `start`, `center`, or `end`              |
| **alignOffset** | Offset from the alignment position                  |

## Related

* [Tooltip](/university/radix/tooltip.md) – Non-interactive hints that appear on hover
* [Dialog](/university/radix/dialog.md) – Modal window for focused content
* [Sheet](/university/radix/sheet.md) – Sliding panel from screen edge
* [Select](/university/radix/select.md) – Dropdown selection component


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/radix/popover.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.