Popover

ic.Popover is a floating panel anchored to a trigger component. Clicking the trigger toggles the panel open, and clicking outside or pressing Escape dismisses it. Unlike ic.Dialog or ic.Drawer, the popover does not use a backdrop or block interaction with the rest of the page, making it a good fit for menus, tooltips, color pickers, or any compact UI that should appear near the element that invoked it.

Side, alignment, and offset

Side controls which edge of the trigger the panel appears on: top, right, bottom, or left. Align positions the panel along that edge: start, center, or end. Offset sets the gap in pixels between the trigger and the panel. When AvoidCollisions is enabled (the default), the panel automatically flips to the opposite side if it would overflow the viewport.

Panel content and bindClose

You populate the popover by adding children to pop.Panel, the auto-created ic.popover.Panel container. For menu-style popovers where each item should dismiss the panel, use bindClose to wire a click on any component to close the popover and fire the Closed event.

Events

Popover fires Opened when the panel becomes visible (user clicks the trigger) and Closed when it is dismissed (click-outside, Escape, or bindClose).

Custom styling

The panel’s visual styling lives on .ic-po-panel (the PopoverPanel component). The outer positioning wrapper is .ic-popover__panel. Target .ic-po-panel for background, border, shadow, and padding overrides.

btn = ic.Button("Label", "Color palette");
pop = ic.Popover(btn);

pop.css.style(".ic-po-panel", ...
    "background", "#1e1e2e", ...
    "border", "1px solid #313244", ...
    "border_radius", "6px", ...
    "padding", "12px", ...
    "box_shadow", "0 8px 32px rgba(0, 0, 0, 0.4)");