# Popover

<figure><img src="https://lh5.googleusercontent.com/znQv82LZQr1ocsASTa4Vgi2e08EMa8T1IuN1e5Wxp13UXpKfsXTBptswKuWPX-J7On_W7MCHKqNjxw1KaOo6ku5wHEVrRnYuoBhIN75AA__9g6E_9VkrM-cjKxkEq6wAxI54lIvtBeiN2dAvg7krXJ6Oe0VY_YtgTIjuQmh9V2m35CwhOW6qSfF5vPQcSQ" alt=""><figcaption></figcaption></figure>

The `popover` block is a pop-up box that appears on hover, click, or focus when the user interacts with an element - known as the trigger.

The  `popover` block is designed to contain as much content as the user requires.

The `popover` block is an independent block that has no parent.&#x20;

It acts as a container in itself so in most circumstances you do not have to put your content inside a div.

{% hint style="danger" %}
If you haven't added any content to the popover block or set a fixed height or width, then it will disappear when you add the trigger.
{% endhint %}

{% hint style="info" %}
For accessibility and clarity purposes, it is preferable to place the `popover` block underneath the trigger element.
{% endhint %}

## Add a Popover

* Open the Block inserter and find the `popover` block.
* Click to add it to your page.

<figure><img src="https://lh4.googleusercontent.com/hihLBo4AaQjMT87b39oujqbrR07I_H99d6SbjtCt2JPV4OO9xom9xuFJw2Ah0yy_YgZVYP1N8QRni8v9l23_9tSiVQ5z0nQNE2_nVkiwEpvFou-fCUJmJ153Qm1kAWB3G06-zpvhed3kJ232MJHx77_8a0q7wLlmHROHpDXqs8wrI7GjfDs7-zdXJmDLdA" alt=""><figcaption></figcaption></figure>

## Popover Content

It is helpful to add content to your popover (heading, paragraph, image etc) and/or set a fixed height or width before adding a trigger.

Otherwise the popover will not be visible when the trigger is activated.

You can fully customise your popover using the tabs provided (layout, colours, margin and padding).

<figure><img src="https://lh5.googleusercontent.com/3-Gf8lLPtwVgPFqUAdZBbXuiYR2xKI7jeymVjUiD3nLnujiOMTKxxOoFAsvBLHNmzmK38F2l__VXPJk42_0sM42vniCr3YfeDdyP_T63X8hw7LHLpdkasC0kAVl40-PoEgLqGlGvA-UVQRfVKscXr1wvdPXh_K0ia9q5TjoUdLZ5gJnlB3U9H0sjtlvqWA" alt=""><figcaption></figcaption></figure>

## Trigger element

A  trigger is any block that is used to activate the `popover`.  The block ID of the trigger element is used as  the Trigger ID for the `popover`.

An example would be a cart icon which when clicked or hovered over, brings up a popover with the cart contents.

For accessibility and clarity, we recommend you add the `popover` block underneath the trigger.

<figure><img src="https://lh5.googleusercontent.com/EUboOoCZ9E_rrNCmGeu_J5uXfsZ80Xb_MlPIoYezZ9_V5HtGM7Lp8DHLUnFCFuCGnQzVOQ7LjqpKeI4mgfqpZm9Kjof9xzA8Z5OHqfXmGO23HSaEb9ENdhKVFbXv7oL6cCIPCw4giU6bVFQ_OfxvlFyKU0RyWS7L0wBCA40o2a0YTnueR_mJJgYAnZYX8w" alt=""><figcaption></figcaption></figure>

## Trigger ID

The Trigger ID input window allows you to input or select (in the dropdown) the block ID of the trigger you require to activate the popover.

* Select the element that you wish to trigger the popover.
* Copy the block ID
* Paste the block ID into the Trigger ID window(Primary tab, Popover tab, General tab).

<figure><img src="https://lh5.googleusercontent.com/hcHaDde2BtbF58w7V9SatM2t6-j227HhqLmFgUtJZx2QlTbxMG4ypkGxl23yBy4dikceIfn30vUey_roIY29UgzwalGEjhjINtBJZcLz_reLq_GH0TKENVNPIMzYOIJBMBODooWNsj7W9A28SybiANtW0tp23p7jDma0fqJ1aesrppzixnNoJH42maggkg" alt=""><figcaption></figcaption></figure>

## Popover Settings

The Popover tab gives you access to the General , Position and Timing tabs.

![](https://lh3.googleusercontent.com/Pr_WcNLisRSD0IKK0oC0r4LrZpUCHelmlsBSG3vDqHo7CDMTLycOKWn7ppih6aEHPqnF-IjmdBZ6kT33SJ6Hdo37YoE2OEDQeLMBVCPHJsjZ9vlyGUYYb9UgbSJ1j2WL0LDx9bJ9lgUa-IN8c7ZNYv4wND4z9BgaTEYvXQ7wTsiXMGZkzlqeSL2ufuUxMw)

## General

The General tab allows you to select the type of popover interaction(hover, click, focus), add the Trigger ID,  Disable Focus, Hide on click, click in, click out.

![](https://lh3.googleusercontent.com/rqkq3RPMO1yTvZJqOeyZ7SmyxY4L9o5Op7W-I2S6PQWliWbWL_r8usemBbdWb8NJN9fChcnCWhoSdlKZURbpH2EMh7JuQUHDR9m34kfLTlVD57uwDvOAKNii203w0Wz-4wcIhf8VYERkJJoXdDlnp_JI7CMcr3bnibSiU-xTHOwg5t3R-bOe_ICg-q9KHw)

### Trigger Interactions

The popover can be triggered by hover, click or focus.

![](https://lh6.googleusercontent.com/nniFjGCMpQUcQ0i8ScUcfD5JJmRRhjZHcmSqoWnHOCk1zt5elqYlvRDMPaazl0oiJW5K0jbMrAH7MgMLCJxq5H_LmHVm0kR7878a6uByDrInJjYXtt2mEAKQCybPtLYbmidA9YN_s-vtiaxGz3zR6Zu4vY7y5IsKSKkohg0wjozaG33CvpkIamCbgfnS9g)

{% hint style="info" %}
The selected interaction will only apply on the frontend.

When on the backend you can click the trigger element to open and close the popover.
{% endhint %}

### Hover

The Hover property allows the popover to appear when the user hovers over the trigger element.

![](https://lh5.googleusercontent.com/1t9yWmdB3uOMKydm73f9KETQcU5ACtvBVkUqOylxdXSFUtlwnqb4kJpTXvRYM0DFQUkroN7Mc4t69YEQ_R2OFlIblG931J6X88BYtHrIVlG0zhpAdVdk_s-CytNLN1IS7pm8kvd70u3OsXUPG_0Jt7DqAvwacpzn3yyq4nNtNhtmYLSMNyiha4cJNz25nA)

#### Hover interactive

When the hover property is selected, the hover interactive toggle becomes visible.

When enabled, this allows you to interact with the contents of the popover on hover.

* Navigate to the General tab of the Popover tab in the Primary tab.
* Find the Interactive toggle.
* Toggle on/off  to enable or disable interaction with popover contents.

### Click

The Click property allows the popover to appear when the trigger block is clicked.&#x20;

This is only visible on the backend and frontend.

![](https://lh5.googleusercontent.com/-csYI0P1hvNPnQJLschyslZPKaU0nfJ6h8DhwBvASSXXQSJTDYKKclORqRzL9BXqxbBptnwC0PT4KGlIm8a23DrR8NQIA4agYyyoCVn08ydb6lsjBWcUsUYJrGrsTdNFG-F_CHoo978-comSEU5H_r2gavdekwbwjFlhhPQhC_-vBn8LD8UbPXx6PHMKUg)

#### Disable Focus

The Disable Focus property becomes available when you select Click in the General settings.

This allows you to decide whether on not you want your users to interact with an input field in the popover.

### Focus

The Focus property allows you to show the popover when you focus on the trigger element (click, tab etc).

![](https://lh4.googleusercontent.com/rYgNRcMLO-BqZwjFJqi4Sj9-YrmT5xNHSsGvFMVsE5IIJbHofQl0H9cmW3crLl1WEaX3WVezWpk1lENccl17r814CwJIBq8JMmPMUQBbUQm4YjtVtsAmzcC5682g4mzHgMf4tcMzSkbkNd4U11eB0x5epr8UKny7vGEV6OYxBUIkiv10Jir-pQxRDNlfRQ)

### Hide On

![](https://lh3.googleusercontent.com/CH-XV9hecoJPJYan1sIOOQ_r8Wa8RyR7iohjD45dA4qMARe8TprO2WgIp-WB_3m-VY1-qItpVuObbs-1My2cJPzbOnfp429SoMqZOwyJPBDN7E_KGdtt2oA2ZYBp796j_Pw6v1b3159A_q22n0OSvPLHAqNLt2EkqWsAlF9iPs6DxHgEXafG-ocUaJj1QA)

The Hide On property is available on Click or Focus.

It allows you to choose how you wish the popover to be hidden (Click, Click In, Click Out).

#### Click

The popover will be hidden if you click anywhere on the screen.

#### Click In

The popover will be hidden if you click anywhere inside the popover but not if you click outside the popover.

#### Click Out

The popover will be hidden if you click anywhere outside the popover but not if you click inside the popover.

## Position

The Position tab contains the properties that control where the popover is positioned relative to the trigger.

![](https://lh4.googleusercontent.com/E65VZulb846tmA_BnBgBnx3vZFTX5fQBDDA1rBo-71UkExE9a5l4K91aFRkdAge3zLLaMDvhr7P_o9UK0SkAPg9WiktBcyOmdAr9ALqrHY53Oadte6KAKkyPBaUBkMzC_MMCiR5okq0IGMKnHVsYwAHTjKhwkR4k1TYM_OKUiop0dTE9gxrOd3Y0rwtCxQ)

### Position

By default, the popover is Absolute (relative to the trigger) but you can choose to select Fixed(relative to the viewport) in the dropdown as required.

To reset, click on the blue dot.

![](https://lh4.googleusercontent.com/jtWxaq55btjGiJXQVTjSniLEm-_C35Y7NE7toi1ZIHsU98OZwL3pb0I7jy4UlFzSrW-MHbmp0eJcZ6cbM1nGvvSYt_LQqzSNnTDTS1y2u6pZlcyPx_GCOjgA0eGIzaBn5WYMT_84FjP30dH0pytcusHVmMfxpgDwL93v1HuEo18b_4lsOIT8nEtpJBA0zA)

### Placement

The Placement property determines where the popover will be positioned.

You can choose between ( top start, top centre, top end, right start, right centre, right end, bottom start, bottom centre, bottom end, left start, left centre, left end).

![](https://lh3.googleusercontent.com/YsVvkDqDusipa1ANqm_DazIXGOs-KbnKetiRIxkBZ2xsVCyUKadc5QI-xXvuckuqjaHUYrLfYL-MgcCsvOhTxHxOuWlDAsPoGfgE26BYqn5qeM4XjwfhlIodfd9AB_J3Ku-anYRDFhkDCn1XtQacJDbN39mfgZAgTJqTfl6G4n_nIOEzZMfJuTzakZ94JQ)

### Offset

The Offset property allows you to displace a popper from its trigger. This can be useful if you need to apply some distance between them.

![](https://lh4.googleusercontent.com/elR0HfrCrVu8QXzex_J9y9RIN3N5O_nYhrgvdBDAvK2e424SAKyxR3IRcASCk-b6ZU9_ZkjEDYGbF9QwAonfSHKOHxkBrAflRMKBxbAWDFOzNsEBvSQw8la03h5VbIHa87ArEpSrVoSXPq_pkL7Co3SoL_Tf8BMvln38apa2KBc2Dm9wxewI7yuq6oa0WA)

### Shift

The shift property shifts your floating element to keep it in view on scroll or on different screen sizes.

![](https://lh4.googleusercontent.com/GZJ-kPJKUb917gb0SSuvNnkMfaXc0FXnG2XvCHkx101aj1G3kmW2zWLsNsHeFRXorcMsrLbyV4e78xuE-DQKh-XL0RK98RXgcvnOJtkWr-vNQrD22TeY5kUyn5AA8N6wYcxaDb7uifyLzBX5dlj4x9cYQvhOsizIsKkYwLpnrDyOwAIbjUx7jpkFCGL5AA)

### Flip

The Flip property changes the placement of your floating element to keep it in view.

![](https://lh5.googleusercontent.com/jDcrJAW455jkysq1ukJCQYEirRofx6riOcmhoVVs8avCymJF_ReMRbIUvQoJGAIcOFb0dIYMfUljeJceUZPsTLIeKl5MAQxDbQutcURhKEE0Y6vFzP3k3DiAwLEgmHm1bchAmpf6sUoC_IWqErt_0-6Xes8XeEB4tVbv48CHapKrxoYyWp7eWjMI6Z4-cg)

## Timing

The Timing tab contains all the properties to create and control a variety of animations you can apply to your popover.

You can also vary the duration and delay.

![](https://lh5.googleusercontent.com/mgeZHVtFypR2xk7jO_kIyTNxIYLg1WK1AkiCvyL6EbnSTvK9r8ZMae5nfKr6tUCGOGnr0xjdUs_BV13izXi2jwmnjOj16-KYLKSaazBBMO-24FjLh0shBqfDiuE_4YD0_vsOIFLl9qS6SRqE3eOYtwzr-9TquPBylid4-LSNGDP0jgxSO_XUOUwynT7Fcg)

### Animation

The animation property allows you to choose from a variety of animations to add to your popover to personalise them and make them more attractive to the user.

Available animations include: fade, scale, scale subtle, scale extreme, scale top right, scale subtle top right. scale extreme top right, scale top left, scale subtile top left, scale extreme top left, scale bottom right, scale subtle bottom right, scale extreme bottom right, scale bottom left. scale subtle bottom left. scale extreme bottom left. shift toward, shift toward subtle, shift toward extreme, shift away, shift away subtle, shift away extreme, perspective, perspective subtle, perspective extreme.

![](https://lh6.googleusercontent.com/Inq-1OIFknr3Tiw_vzMsveWnfqAh9xW7_886uXTnnGdzRTASriWXQPHny68gz9suqQE3cgAhp9sgRnSFR5GOznLfgIRlnekZ6ub6oR7QP6mgkQ0A8yv9urFUu-Y-ZHJS1LSSQBbueJ_YoI7BRnJpwJK9ZyHeoDwpre8Y1UF4ey8Kngn2uO80xO_D5ArQ5A)

### Duration

The Duration property allows you to choose how long the animation should take to appear completely.

![](https://lh5.googleusercontent.com/ZuY73MVDini4IwziFNHrnLJ3xmqgOBTDKIfD7FxQWzpt7jRa6OTkSJyb3FUSm10xU83-Hn4KcNqAgX4SCwdbOYcrVCgV8FgZ4PHKWWEwDAdzboir6HB8NrPqAA-IKPeoxwWfbzOxwlwI9H7xGkQEmFci9fCrC-ycR3rLTESLV7D9ZTQJy5azXnTNI48-Zw)

### Duration (out)

The Duration (out) property allows you to choose how long the animation should take to disappear completely.

![](https://lh6.googleusercontent.com/wVtr_1wBMzKRiGooBW109b46vy153wJUP3W-rHwoWryaNqaEms52Inth4sVeEuprB_9lJ05wkuDeHAVPCQrCic8-y-iO2AXwxUnA5dqJ-vS9LMY7MnmNCp700PBLSRsRtXFifw4HPTBuEZ4hKGQBp6emGNfMZqsbAcAqVEGxrDTdmn_T0FGSiU1HhUed8g)

### Delay

The Delay property allows you to choose the time between the trigger interaction and the beginning of the animation.

![](https://lh6.googleusercontent.com/xOZ18ILKN52OchkCNV8FJvAsRA4pI639fXpwut5HQ9cRv-vnvM4zWgE6RX5jH9hCbf7WC5YtlKktlZ59tk4hi3PKyKRULMmYNRXgbrclRva2Gd1LtlgWUyPd2qVbGm4q4UV4oThtAFHJOGpnkPi0UQFLL_s-zgYdve9U-OR22bhmtLRbbFIVGfd7PFIJ2Q)

Delay (Out)

The Delay (Out) property allows you to choose the time between the trigger interaction (click, click in, click out) and the disappearance of the animation.

![](https://lh6.googleusercontent.com/f6KTWINHX7wRh_PeSu1RWU0B2qxdYC4lCtPcVuefAiiQuvY2wuMLxlVk46jtp5YNMTD0kQspgcLS2SPtQ67g1HkkPXO-HvZpVR0Ysw9BvhaefhY-wJ52QidYz3Jf0snRBhHHMrahk3oHZm953g7ovKDf_Hq5k3g6cDotUCGXI_HLHX6FOXGMQegoepIfzQ)

## Open Popover from another Element

A `popover` can be opened from any other element by using a  link wrapper.

This gives you greater design freedom and flexibility.

* Select block you wish to be a new trigger.
* Enable  Link in the Block Inspector by toggling the lInk icon.
* This will open a Link modal.
* Ensure that  Active is toggled on.
* Chose Action as the Link Type in the dropdown.

<figure><img src="https://lh5.googleusercontent.com/flFEhHAKn7DZaWYaAYLuHhwpi0URVqA8w7vJMbylVi-SgeJZFE3h5A0JqkFB95BGRaL_oLGLYYF8sEtZo6QdCz0_zhxmAFC2wiGw6Et3eVJ06bVGeJ9LugbMncGYvklVFTJ7DJkPdcrM7zf5zDM4sYH-hwpwweePi-6zbjzDvxsfZ6d7wWv4kgRb8F-vag" alt=""><figcaption></figcaption></figure>

* Choose required Action (Show, Hide, Show-Hide) depending on how you wish the interaction to work.

<figure><img src="https://lh4.googleusercontent.com/qGjSMKuZCQEpcIDOduMzxhN7pto9MWt40FFX6XTdNYIFlVihLS97ND6D8OYjE1HIf36YMGvtNsloyAreoAWMtJ9-aHLH_t6IzYLi_wwjswYSzUiFje4SafiaGspLuQFHR1G3dCu1wBpG01Cu-cqw_kC1DD5f3BJN5xNbNynNTXtSHHh7hZHfShtFb3_KYQ" alt=""><figcaption></figcaption></figure>

### Show

The Show property enables the new trigger element to show the popover when clicked.

<figure><img src="https://lh5.googleusercontent.com/1hJTSg1ka63pYD9W6HyKy3vwBAco_k7CcYo9z2UwnQOwPVzxVvK8IRK71c2Kn2FOYOFti4fITH9qSDlwyts7W8jT2iGqgVIIkBedGPGcCGNmNSBc8jjKxt84PDFcJCtsqgW4wVkJYVmTQkzGx3ICqpxUUUxOsthNajjLdA1xFPQcWQ-JHfwb9Q6YPJslgw" alt=""><figcaption></figcaption></figure>

* Input or paste the Popover ID.

<figure><img src="https://lh3.googleusercontent.com/3UDVMoOfdC7dtx45eT3H6OHT_CwrIru3HiHXwrSnM-ad5LrVW909afu0tYy1iAb4e3xPLkH_jVV35WkAVxsjcoZkWYZbCnLPOLxyCuk5pUbuOftDWrcA9nW0zb2MzvY2F6HrsrVAd3UXM_y_eFN5gPiMe_Lin5zY3yREdZ5wVpdQxsktZUbkS8Ik_RbUYw" alt=""><figcaption></figcaption></figure>

### Hide

The Hide property enables the trigger element to close the popover when clicked.

Input the Popover ID in the designated window.

<figure><img src="https://lh6.googleusercontent.com/FQRBEloQ6HhCU57I5FJacXHgw79q560uysukGporMkDzLOCI4Ecby6VXZEzW5OyZ2tGV3VpsHZE5Es6-W4-DF2IW6IDBfbgywu-O3hWIPmhiR70m29AAbUOrVJudzkusSvuLFAiYog1QmUD3VO0vGn6Eoese9kyR-EkGPSdYAgsNz_IKgaxdUp1Y8sv2IQ" alt=""><figcaption></figcaption></figure>

### Show to Hide

The Show to Hide property enables the trigger element to show the popover for a designated time and then hide it.&#x20;

Input the popper ID in the designated window.

You can set the delay before it appears (delay in) and the time for which it is visible before it disappears (delay out).

<figure><img src="https://lh3.googleusercontent.com/ntXFmXdVb84odCSODi6cas5A5qTUj25VoXpl8INXb6qbzZaz_R1mkIOvWFKzerVjAElFaZ7i1Wl7xJs3HYl8kxU1OeLBbILqWVcdOueQUk4Rz6UOfEzYO0EZ4-B6rXIjQbalm2jyG60vH2fib29HfnUR8ahiXlOcryXjg9GApN0OgmasqEyY6_cDhcEokg" alt=""><figcaption></figcaption></figure>

### Toggle

The Toggle property enables the new trigger to show or hide the popover as required.

Input the popover ID in the designated window.

<figure><img src="https://lh4.googleusercontent.com/kNOhWD-VBLZ2ONPdfI0cTlLSUFOgP0VYfr1gvmXgyStcJkDELPsYlcdJiM982qafcn4NqVK06ipvVYkLWlK75vzavxCZ5UKJf4QTd8heSSFSXBKW1jMBdoC4OPMxTJrGs9pnyzJFkOoHiOJbCLoyUnBJI71hVNna4YDRyzTJX5caEHWTMjcYZw4OH7kjHA" alt=""><figcaption></figcaption></figure>


---

# 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.cwicly.com/blocks/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.