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.
Last updated