Component Popover

Popover

A floating panel anchored to a trigger. Used for menus, settings flyouts, autocomplete suggestions, and any "pop this near something" UI.

use yororen_ui::headless::button::button;
use yororen_ui::headless::label::label;
use yororen_ui::headless::popover::{popover, PopoverPlacement, PopoverState};

let popover_state = PopoverState::new(&mut **cx);
popover_state.update(cx, |s, _| {
    s.set_placement(PopoverPlacement::BottomEnd);
    s.set_dismiss_on_outside_click(true);
});

popover("user-menu", popover_state)
    .trigger(button("user-btn", cx)
        .caption("Profile")
        .on_click({
            let state = popover_state.clone();
            move |_, _, cx| state.update(cx, |s, _| s.toggle());
        })
        .render(cx))
    .content(label("user-email", "ada@example.com", cx).render(cx))
    .render(cx)

State methods

Method	Purpose
open() / close() / toggle()	Show or hide.
is_open() / is_visible()	Current state.
set_placement(p)	PopoverPlacement::Bottom / BottomEnd / RightStart / ….
set_width(px)	Force a fixed width.
set_dismiss_on_escape(v)	Escape closes the popover.
set_dismiss_on_outside_click(v)	Clicking outside the trigger + content closes the popover.
set_on_close(f)	Fn(&mut Window, &mut App) + 'static + Send + Sync.

Props

Method	Purpose
trigger(el)	The trigger element (rendered in normal flow).
content(el)	The content element (floated).

.render(cx) returns Stateful<Div>. The trigger's on_click is the caller's responsibility — wire it to state.toggle(). The renderer floats the content via gpui::deferred and absolute positioning; you do not need to do this yourself.

See also: Modal, DropdownMenu, Tooltip.