Class PopoverService

Service for opening non-modal popovers anchored to a DOM element using the native HTML5 Popover API ([popover], showPopover()).

Ideal for context menus, rich tooltips, dropdown panels, and any content that should float above the page without blocking interaction with the rest of the UI.

Content components implement UIPopoverContent and receive a PopoverRef via dependency injection.

Example

this.popover.openPopover<MyMenu, string>({
  component: MyMenu,
  anchor: buttonElement,
  verticalAxisAlignment: 'bottom',
  horizontalAxisAlignment: 'start',
  verticalOffset: 4,
  inputs: { items: menuItems },
}).closed.subscribe((action) => this.handleAction(action));

Index

Constructors

constructor

Methods

openPopover

Constructors

constructor

new PopoverService(): PopoverService
Returns PopoverService

Methods

openPopover

openPopover<T, R = unknown>(config: OpenPopoverConfig<T>): PopoverRef<R>
Opens a popover anchored to the given element.
Type Parameters
- T
- R = unknown
Parameters
- config: OpenPopoverConfig<T>
  Component type, anchor, placement, inputs, and output handlers.
Returns PopoverRef<R>
A PopoverRef to observe the result or close programmatically.
- Defined in packages/ui-kit/src/lib/popover/popover.service.ts:364

Class PopoverService

Example

Index

Constructors

Methods

Constructors

constructor

Returns PopoverService

Methods

openPopover

Type Parameters

Parameters

Returns PopoverRef<R>

Settings

On This Page