Popover
Feedback
Takes a block
A layer at a control: drawn above everything, placed against its anchor:, closed by Escape or a press outside, which write false back to visible: and fire on close.
Popover(visible: …, anchor: …, at: …) { … }
Example
state open = false
Button("Branches", ref: branches) { on click { open = !open } }
Popover(visible: open, anchor: branches, placement: .bottomStart, label: "Branches").arrow {
on close(reason) { log(reason) }
Text("main")
}
Renders with the class wf-popover, stable across releases, so a stylesheet may target it.
| Prop | Type | Meaning |
|---|---|---|
| visible: | State |
State flag that opens and closes it |
| anchor: | Any |
What it is placed against: an element's |
| at: | Any |
A point to place it at, |
| placement: | .bottom .bottomStart .bottomEnd .top .topStart .topEnd .left .leftStart .leftEnd .right .rightStart .rightEnd |
Where it goes against its anchor; it flips to the other side when there is no room. Unset, |
| offset: | Number |
How far from the anchor, in px |
| label: | String |
What it is, for a screen reader: its accessible name |
| arrow: | Bool |
A point toward the anchor |
Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.