Popover

A generic floating element that renders in a portal overlay with backdrop dismiss, positioning, and open/close state management. Includes default card styles (white background, rounded border). Used as a base for context menus, share sheets, dropdowns, and other floating content.

Constructor

new Popover(
    new Label("Popover content goes here")
);

Examples

Build a custom dropdown with arbitrary content:

var dropdown = new Popover(
    new VerticalGroup(
        new Label("Choose a color:"),
        new Button(new Label("Red")).OnClick(_ => SelectColor("red")),
        new Button(new Label("Blue")).OnClick(_ => SelectColor("blue")),
        new Button(new Label("Green")).OnClick(_ => SelectColor("green"))
    )
);

new Button(new Label("Pick Color"))
    .OnClick(_ =>
    {
        dropdown.AnchorTo(button.GetVisualElement(), AnchorPosition.Below);
        dropdown.BuildVisualElement();
        dropdown.Open();
    });

Anchored Info Panel

Show an info panel anchored to an element:

var infoPanel = new Popover(
    new VerticalGroup(
        new Label("Details").ClassName("title"),
        new Label("Additional information about this item.")
    )
);

new Button(new Label("Info"))
    .OnClick(_ =>
    {
        infoPanel.AnchorTo(infoButton.GetVisualElement(), AnchorPosition.Right);
        infoPanel.BuildVisualElement();
        infoPanel.Open();
    });

Show a temporary notification at a screen position:

var notification = new Popover(
    new Label("Item saved successfully!")
);

notification.OpenAtScreenPosition(new Vector2(Screen.width / 2, 100));

Programmatic Control

Control popover state programmatically:

var popover = new Popover(
    new Label("Controlled popover")
);

// Open/close
popover.Open();
popover.Close();

// Check state
bool isOpen = popover.GetOpen();

// Bind to reactive state
popover.BindOpen(ShowPopover);

// Register close callback
popover.OnClose(() => Debug.Log("Popover closed"));

Properties

Prop	Type	Default
`children?`	`IElement[]`	`[]`
`open?`	`bool`	`false`
`disabled?`	`bool`	`false`
`visible?`	`bool`	`true`
`name?`	`string`	`""`

Methods

Prop	Type	Default
`Open?`	`(bool = true) => Popover`	-
`Close?`	`() => Popover`	-
`GetOpen?`	`() => bool`	-
`BindOpen?`	`(Observable<bool>) => Popover`	-
`OnClose?`	`(Action) => Popover`	-
`Position?`	`(float x, float y) => Popover or (Vector2) => Popover`	-
`OpenAtScreenPosition?`	`(Vector2 screenPosition) => Popover`	-
`OpenAtCursor?`	`() => Popover`	-
`AnchorTo?`	`(VisualElement, AnchorPosition = Below) => Popover`	-
`BindChildren?`	`<TChild>(Observable<TChild[]>, Func<TChild, IElement>) => Popover`	-

Extension Methods

These extension methods are available in the ELEMENTS.Extensions namespace and work with any Popover (including ContextMenu):

Prop	Type	Default
`WithContextMenu?`	`(Popover) => T`	-
`WithRightClickMenu?`	`(Popover) => T`	-

AnchorPosition Enum

Prop	Type	Default
`Below?`	`AnchorPosition`	-
`Above?`	`AnchorPosition`	-
`Left?`	`AnchorPosition`	-
`Right?`	`AnchorPosition`	-

CSS Classes

.elements-popover - The popover container
.elements-popover.open - Applied when popover is open
.elements-popover-backdrop - Invisible backdrop for click-outside detection

Popover extends Group which extends BaseElement.

Popover

On this page