popoverblock is a pop-up box that appears on hover, click, or focus when the user interacts with an element - known as the trigger.
popoverblock is designed to contain as much content as the user requires.
popoverblock 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
popoverblock underneath the trigger element.
- Open the Block inserter and find the
- 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
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
popoverblock 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.