# Popover

A **Popover** is a transient component that shows when the user clicks something with an On Click event handler, such as a **Button**. A Popover follows the rules of modality, which renders a temporary context to get the user’s attention. The Popover component is only an empty container, able to hold any other UI Component.

{% hint style="info" %}
It is recommended to give the Popover component a descriptive name, in case of multiple Popovers in a View, to make the configuration of the **Open Popover** Action Node simpler. The name is used to identify the Popover in the dropdown menu in the Action Node setup.
{% endhint %}

{% hint style="info" %}
An example setup of a Popover / Open Popover is showcased in our [Showroom](https://showroom.appfarm.app/action-nodes/open-popover)! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

### Appearance

#### Show Backdrop

Add a dark overlay colour to the backdrop / background when the popover is open.

#### Anchor Origin

The point on the anchor component where the Popover will attach to.

#### Transform Origin

The point on the Popover that will attach to the anchor component.

### Event Handlers

#### On Close

Run an action when the popover is closed. I.e. when having a popover open and you click outside it, the popover is closed and the On Close event handler is triggered.

### Placement in the UI

You can place the Popover anywhere in the view, as long as it is not inside a hidden part of the UI. The Popover will open relative to the currently clicked component as an anchor when opened from an App. You may have several Buttons in a View, opening the same Popover when clicked.

You may offset the placement of the Popover by setting the margin in the [**Property Pane Styles**](/reference/apps/ui.md#styles) section.

### Toggle a Popover design time

The Popover is automatically opened in the UI Designer if a child component is selected in the **Application Views** section. You may also expand/collapse a Popover design time to reveal its content by clicking **Expand**/**Collapse** on the placeholder representing the design time placement of the Popover.

### Open a Popover from an App

The Popover is opened by using the [**Open Popover**](/library/action-nodes/open-and-close-popover.md#open-popover) Action Node

### Close a Popover from an App

The Popover is closed by clicking outside of the popover when it's open or by using the[ **Close Popover**](/library/action-nodes/open-and-close-popover.md#close-popover) Action Node.

### Warning when copying popovers

If you make a copy of your popover, a new popover is actually created, but with the same name. Please make sure to rename the copied popover and create new actions for opening or closing this new popover.


---

# 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.appfarm.io/library/ui-components/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.