Components / Popover
Popover
Floating content container with smart placement, arrow indicator, click/hover triggers, focus management, and auto-positioning. Use for filter panels, quick actions, or any floating content.
overlays v0.7.0
Playground
Examples
Filter panel
Filter by
<cg-popover placement="bottom-start"><cg-button>Filters</cg-button><div slot="content" style="display:flex;flex-direction:column;gap:12px;"><strong>Filter by</strong><cg-checkbox label="Active"></cg-checkbox><cg-checkbox label="Archived"></cg-checkbox><cg-checkbox label="Deleted"></cg-checkbox></div></cg-popover>With arrow
This is a popover with an arrow pointing to the trigger element.
<cg-popover placement="top"><cg-button variant="secondary">Info</cg-button><div slot="content">This is a popover with an arrow pointing to the trigger element.</div></cg-popover>Import
import { CgPopover } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-popover';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
placement | "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "bottom" | Preferred placement |
offset | number | 8 | Distance from trigger in px |
arrow | boolean | true | Show arrow pointing to trigger |
trigger | "click" | "hover" | "manual" | "click" | How the popover opens |
closable | boolean | true | Close on Escape or outside click |
size | "sm" | "md" | "lg" | "md" | Max width |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius |
Events
| Event | Detail | Description |
|---|---|---|
cg-popover-open | {} | Popover opened |
cg-popover-close | {} | Popover closed |