> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/web-elements/popover.md).

# 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 %}