Popover

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.

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

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.

For accessibility and clarity purposes, it is preferable to place the popover block underneath the trigger element.

Add a Popover

• Open the Block inserter and find the popover block.

• Click to add it to your page.

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).

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.

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).

Popover Settings

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

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.

Trigger Interactions

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

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.

Hover

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

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.

This is only visible on the backend and frontend.

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).

Hide On

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.

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.

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).

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.

Shift

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

Flip

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

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.

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.

Duration

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

Duration (out)

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

Delay

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

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.

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.

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

Show

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

• Input or paste the Popover ID.

Hide

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

Input the Popover ID in the designated window.

Show to Hide

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

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).

Toggle

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

Input the popover ID in the designated window.