Skip to content

SiPopoverDirective documentation

selectorexported-as
[siPopover]si-popover

Input Properties

NameTypeDefaultDescription
containerClass
string''The class that will be applied to container of the popover
icon
stringThe icon to be displayed besides popover title
isOpen
(undefined | boolean)falseSpecify whether or not the popover is currently shown
outsideClick
booleantrueThe flag determines whether to close popover on clicking outside
placement
("end" | "start" | "top" | "bottom" | "auto")'auto'The placement of the popover. One of 'top', 'start', end', 'bottom'
popoverContext
unknownThe context for the attached template
popoverTitle
string''The title to be displayed on top for the popover
siPopover
(string | TemplateRef<any>)The popover text to be displayed
triggers
string'click'The trigger event(s) on which the popover shall be displayed. Applications can pass multiple triggers separated by space. Supported events are 'click', 'hover' and 'focus'.

Limitations: Safari browsers do not raise a 'focus' event on host element click and 'focus' on tab key has to be enabled in the advanced browser settings.

Output Properties

NameTypeDescription
hidden
voidEmits an event when the popover is hidden
shown
voidEmits an event when the popover is shown

Attributes and Methods

NameTypeDefaultDescription
hide()
() => voidHides the popover and emits 'hidden' event.
(readonly) placementInternal
Signal<("end" | "start" | "top" | "bottom" | "auto")>...
show()
() => voidDisplays popover and emits 'shown' event.
updatePosition()
() => voidUpdates the position of the popover based on the position strategy.

Types Documentation

No types to document for items on this page.


Except where otherwise noted, content on this site is licensed under MIT License.