Components / Overlays

Popover

A small floating panel anchored to a control, for content that does not need a dialog.

Functions: cui_popover, cui_popover_close, cui_popover_toggle

Usage

if (cui_button(ui, "Filters", .icon = CUI_ICON_FILTER)) cui_popover_toggle(ui, "filters");
cui_popover(ui, "filters", .width = 280) {
    cui_checkbox(ui, "Only active", &only_active);
    if (cui_button(ui, "Apply", .variant = CUI_BUTTON_PRIMARY)) cui_popover_close(ui, "filters");
}

Anchored to the component before it, flips to stay on screen.

The block runs only while the popover is on screen. You keep no state: the library stores whether it is open under id, and cui_popover_toggle, cui_popover_open and cui_popover_close change that from anywhere in the same id scope, while cui_popover_is_open reads it. Call cui_popover on every frame, right after the control it should hang from, not inside that control's if. A press outside closes it. width is in points; without it the panel is as wide as its content and at least as wide as its anchor. Use a dialog when the rest of the window must wait, and a dropdown menu for a list of commands.

Keyboard

• Enter or Space on the trigger opens the popover. Tab moves through what is inside, and Esc closes it.

Options of cui_popover

Option	Type	Default	Description
.placement	cui_placement		One of CUI_PLACE_BOTTOM_START, CUI_PLACE_BOTTOM, CUI_PLACE_BOTTOM_END, CUI_PLACE_TOP_START, CUI_PLACE_TOP, CUI_PLACE_TOP_END, CUI_PLACE_RIGHT_START, CUI_PLACE_LEFT_START, CUI_PLACE_RIGHT or CUI_PLACE_LEFT.
.width	float		Width in points; 0 uses the component's own.
.pad	float		Padding inside, in points.
.gap	float		Space between the items, in points.

Related

• Confirm popover: A small question anchored to the button that opened it.
• Button: Starts an action when clicked. It comes in six variants and three sizes, with an optional icon and a loading state.
• Checkbox, switch and radio: The three basic choices: a checkbox for an option, a switch for a setting that applies at once, and radio buttons for one of several.
• Tooltip: A short label that appears when the pointer rests on a control.