Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
GET NGSTARTER

Popover

Introducing the Popover Component – your ultimate solution for creating sleek, dynamic, and user-friendly popovers in Angular applications. Designed with flexibility and ease of use in mind, this component seamlessly integrates with and Tailwind, enhancing your UI/UX with minimal effort.

Key features:
  • Seamless Integration: Built to work effortlessly with , ensuring a consistent look and feel across your application.
  • Highly Customizable: Easily tailor the appearance and behavior to meet your specific needs, providing a personalized user experience.
  • Dynamic Content Display: Effortlessly showcase additional information, interactive elements, or contextual actions within the popover.
  • Accessibility Focused: Developed with accessibility in mind, ensuring your application is usable by all.
  • Lightweight and Efficient: Optimized for performance, ensuring quick load times and a smooth user experience.

Elevate your Angular applications with the Popover Component – where functionality meets elegance.

Basic Popover

Show popover by hover

Popover custom position

Popover lazy content

Popover with TemplateRef

API Reference

Properties for the ngsPopoverTriggerFor directive.

PropTypeDefault
ngsPopoverTriggerFor
Popover component or TemplateRef to be opened
Popover | 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
ngsPopoverContext
Context to be passed to the popover or TemplateRef
any