Popover
Last updated
Last updated
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.
Open the Block inserter and find the popover block.
Click to add it to your page.
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).
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.
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).
The Popover tab gives you access to the General , Position and Timing tabs.
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.
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.
The Hover property allows the popover to appear when the user hovers over the trigger element.
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.
The Click property allows the popover to appear when the trigger block is clicked.
This is only visible on the backend and frontend.
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.
The Focus property allows you to show the popover when you focus on the trigger element (click, tab etc).
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).
The popover will be hidden if you click anywhere on the screen.
The popover will be hidden if you click anywhere inside the popover but not if you click outside the popover.
The popover will be hidden if you click anywhere outside the popover but not if you click inside the popover.
The Position tab contains the properties that control where the popover is positioned relative to the trigger.
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.
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).
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.
The shift property shifts your floating element to keep it in view on scroll or on different screen sizes.
The Flip property changes the placement of your floating element to keep it in view.
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.
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.
The Duration property allows you to choose how long the animation should take to appear completely.
The Duration (out) property allows you to choose how long the animation should take to disappear completely.
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.
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.
The Show property enables the new trigger element to show the popover when clicked.
Input or paste the Popover ID.
The Hide property enables the trigger element to close the popover when clicked.
Input the Popover ID in the designated window.
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).
The Toggle property enables the new trigger to show or hide the popover as required.
Input the popover ID in the designated window.
