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

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.

The NgStarter Angular Popover component lets you show contextual overlay content anchored to a trigger. It supports click and hover triggers, lazy templates, custom positions, and Angular TemplateRef integration.

Basic Popover

Use a basic popover for short contextual content opened from a trigger.

Show popover by hover

Use hover only for preview-style content that can disappear without losing user input.

Popover custom position

Set position when the popover must open above, below, before, or after the trigger.

Popover lazy content

Use lazy content and context when one popover template renders data from the current trigger.

Popover with TemplateRef

Use a TemplateRef directly only when the standard popover panel wrapper should be replaced.