# 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**](https://docs.appfarm.io/reference/apps/ui#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**](https://docs.appfarm.io/action-nodes/open-and-close-popover#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**](https://docs.appfarm.io/action-nodes/open-and-close-popover#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.