Popover
Description
A reusable, anchored overlay surface used to display arbitrary IComponent content next to another component (the anchor). Popovers are the general-purpose primitive on top of which menus, comboboxes, date pickers, color pickers and similar transient surfaces are built.
Usage
API reference
public sealed class PopoverA reusable, anchored overlay surface used to display arbitrary IComponent content next to another component (the anchor). Popovers are the general-purpose primitive on top of which menus, comboboxes, date pickers, color pickers and similar transient surfaces are built.
Remarks
A Popover instance is configured once via the fluent setters (Content, Placement, Arrow, …) and then shown imperatively against a particular anchor with ShowFor or ShowFor. Unlike the .Tooltip(...) extension — which attaches a hover-triggered tooltip to a component — a popover is *manually triggered*: it stays visible until Hide is called, the user clicks outside (when HideOnClickOutside is enabled, the default), or the anchor is removed from the DOM. Positioning, click-outside dismissal, arrow rendering and animation are delegated to the bundled Tippy / Popper.js library, so the same set of placements and animations available to tooltips also apply to popovers. var popover = UI.Popover() .Content(UI.Stack().Children(UI.TextBlock("Hello"), UI.Button("Close").OnClick(() => popover.Hide()))) .Placement(TooltipPlacement.BottomStart) .Arrow(); var button = UI.Button("Open").OnClick(b => popover.ShowFor(b));
- Namespace
- Tesserae
Constructors
| Name | Description |
|---|---|
| Popover | Creates a new, empty popover. Configure it with Content and the other fluent setters before calling ShowFor. |
| Overload | |
|---|---|
| Popover() | Creates a new, empty popover. Configure it with Content and the other fluent setters before calling ShowFor. |
| Popover(IComponent) | Creates a popover whose content is already set. |
Properties
| Name | Description |
|---|---|
| IsVisible | Gets a value indicating whether the popover is currently displayed. |
Methods
| Name | Description |
|---|---|
| Content | Sets the content displayed inside the popover. Replacing the content while the popover is visible will not retroactively update the rendered element; call Hide and ShowFor again to apply a new content tree. |
| Placement | Sets the preferred placement of the popover relative to its anchor. Defaults to Bottom. The actual placement may flip automatically when there is not enough room on the preferred side. |
| Animation | Sets the show/hide animation. Defaults to None. |
| Arrow | Enables or disables the small arrow that points from the popover to the anchor. |
| MaxWidth | Sets the maximum width of the popover surface, in pixels. Defaults to 350. |
| Theme | Applies a named Tippy theme to the popover (e.g. "light", "light-border"). |
| HideOnClickOutside | Controls whether clicking outside the popover hides it. Enabled by default; disable for popovers that should stay open until explicitly closed by their content. |
| HideOnEscape | Controls whether pressing Escape hides the popover. Enabled by default. |
| DelayShow | Adds a delay (in milliseconds) before the popover shows when ShowFor is called. |
| DelayHide | Adds a delay (in milliseconds) before the popover hides after Hide is requested. |
| OnShown | Registers a callback that runs once the popover has finished its show animation. |
| OnHidden | Registers a callback that runs once the popover has finished its hide animation. |
| OnBeforeHide | Registers a callback that runs immediately before the popover hides. Return false from the callback to cancel the hide (useful for guarding against accidental dismissal during editing). |
| ShowFor | Shows the popover anchored to the rendered element of anchor. If the popover is already visible against a different anchor, that instance is hidden first. |
| Hide | Hides the popover if it is currently visible. Safe to call repeatedly. |
public Popover Content(IComponent content)Sets the content displayed inside the popover. Replacing the content while the popover is visible will not retroactively update the rendered element; call Hide and ShowFor again to apply a new content tree.
public Popover Placement(TooltipPlacement placement)Sets the preferred placement of the popover relative to its anchor. Defaults to Bottom. The actual placement may flip automatically when there is not enough room on the preferred side.
public Popover Animation(TooltipAnimation animation)Sets the show/hide animation. Defaults to None.
public Popover Arrow(bool arrow = true)Enables or disables the small arrow that points from the popover to the anchor.
public Popover MaxWidth(int pixels)Sets the maximum width of the popover surface, in pixels. Defaults to 350.
public Popover Theme(string theme)Applies a named Tippy theme to the popover (e.g. "light", "light-border").
public Popover HideOnClickOutside(bool hide = true)Controls whether clicking outside the popover hides it. Enabled by default; disable for popovers that should stay open until explicitly closed by their content.
public Popover HideOnEscape(bool hide = true)Controls whether pressing Escape hides the popover. Enabled by default.
public Popover DelayShow(int milliseconds)Adds a delay (in milliseconds) before the popover shows when ShowFor is called.
public Popover DelayHide(int milliseconds)Adds a delay (in milliseconds) before the popover hides after Hide is requested.
public Popover OnShown(Action action)Registers a callback that runs once the popover has finished its show animation.
public Popover OnHidden(Action action)Registers a callback that runs once the popover has finished its hide animation.
public Popover OnBeforeHide(Func<bool> shouldHide)Registers a callback that runs immediately before the popover hides. Return false from the callback to cancel the hide (useful for guarding against accidental dismissal during editing).
| Overload | |
|---|---|
| ShowFor(IComponent) | Shows the popover anchored to the rendered element of anchor. If the popover is already visible against a different anchor, that instance is hidden first. |
| ShowFor(HTMLElement) | Shows the popover anchored to the given DOM element. Use this overload when you only have an element reference (for example, when reacting to a low-level event). |