Examples
Basic
Click-triggered popover with header, body, footer, and close.
Position variants
One live popover per PF position modifier —
pf-m-top/right/bottom/left plus the corner variants (pf-m-left-top, pf-m-bottom-right, …).
Hoverable
Opens on hover or keyboard focus, closes on leave.
Close popover from content
A footer action dismisses the popover — PF's controlled/uncontrolled close patterns.
Custom focus
On open, keyboard focus lands on the footer Cancel button instead of a close control.
No padding
pf-m-no-padding for content that brings its own padding.
Advanced
Title icon + close + footer actions together.
Popover with icon in the title
Any icon in __title-icon.
Alert popover
Severity variants — pf-m-info / pf-m-success / pf-m-warning.
Danger confirmation
Static danger-variant confirmation popover (always visible for markup reference).
Documentation
Popover props
Parameters accepted by
{#include components/feedback/popover ... /}. Model mode: pass
popover=<Popover> built in Java instead — the Java tab on each example shows the
builder.
| Name | Type | Description |
|---|---|---|
* id
|
String |
DOM id — set as aria-describedby on the trigger.
|
titleText
|
String |
Header text — wires aria-labelledby if set.
|
position
|
top | bottom | left | right
|
Arrow side. Default top.
|
variant
|
danger | warning | success | info
|
Semantic tinting. |
slots body + footer
|
Qute block | Body content + optional footer with action buttons. Slot names avoid the "content" collision with example-card. |
Usage
Popover vs. Tooltip vs. Modal. Tooltip is a one-line label, no actions. Popover is multi-line with optional footer. Modal blocks the page until dismissed.
Positioning is consumer-side. The runtime template doesn't handle anchoring — wrap the popover in a positioning element (CSS) or layer in Floating UI for collision avoidance.