Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Popover

Popover shows lightweight contextual content in an overlay anchored to a trigger element. Use it for short details, previews, small interactive content, compact forms, or richer explanations that need more than a plain tooltip.

Popover can open on click or hover, use standard overlay positions, receive trigger context, and render lazy template content.

Do not use Popover for command lists, plain short hints, modal workflows, confirmations, side panels, or form dropdowns. Use Menu, Tooltip, Dialog, Confirm, Drawer, Select, Autocomplete, Datepicker, or ColorPicker instead.

Key features:
  • Click or hover triggers.
  • below, above, before, and after positioning.
  • Lazy content with trigger context.
  • Optional backdrop and custom close behavior.
  • TemplateRef support for fully custom floating surfaces.

API Reference

Properties for the ngsPopoverTriggerFor directive.

PropTypeDefault
ngsPopoverTriggerFor
Popover component or TemplateRef to be opened
Popover | TemplateRef<any>
ngsPopoverContext
Context to be passed to the popover or TemplateRef
any
trigger
How to open a popover
PopoverTrigger: 'click' | 'hover'click
position
Default position of a popover
PopoverPosition below-center
delay
Delay before opening a popover
number 500
origin
Custom origin
FlexibleConnectedPositionStrategyOrigin
closeOnOriginClick
Whether the popover should close on origin click
boolean false
closeOnOriginMouseLeave
Whether the popover should close on origin mouse leave
boolean false
hasBackdrop
Whether the popover has a backdrop
boolean false