# Popover

A popover is like a pop-up box that appears when the user clicks on an element, providing additional information.

<figure><img src="/files/FokF0ZvtZvR1ixr1MZrN" alt=""><figcaption></figcaption></figure>

There are 2 parts to a Popover element:

1. The trigger element
2. The pop-up element

<figure><img src="/files/RfJAALfd27SFHi1Diker" alt=""><figcaption></figcaption></figure>

Insert the trigger element where it says “Drop element here”.

To edit the content in the popout menu, click the “change view mode” button. Then drop elements into the white box below.

## Properties

<figure><img src="/files/okulZ5qaszq20qJCIsUh" alt=""><figcaption></figcaption></figure>

**Trigger:** Define how the popover will be triggered.

* Click: Open when user clicks on the trigger element.
* Hover: Open when user hovers over the trigger element.
* Contextmenu: Open when a user right clicks.
* Event: Open when another element prompts it to through an interaction.

**Placement:** Where the popover will appear, relative to the trigger element.

**Disabled:** When on, the popover will be disabled and cannot be triggered.

**Show arrow:** When on, the arrow on the popover box will appear.

**Arrow background:** Choose color for the arrow.

**ShowAfter time:** Delay of appearance in milliseconds.

**HideAfter time:** Delay of disappearance in milliseconds.

**AutoClose time:** Timeout to hide tooltip in milliseconds.

See [Tooltip](/app-builder/app-construction/elements/tooltip.md) for tooltip configurations.

## Supported Events

No supported events.

## Supported Actions

**Set Visible:** Open popover.

**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# 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.acho.io/app-builder/app-construction/elements/web-elements/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.