Overlay

Popover

Themed anchored panel that opens from a trigger, with optional title, close button, and focus trap.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjPopover } from '@kouji-ui/components';

Loading editor

Playground

#playground

trigger label

title

body

side

align

show close button

<kj-button kjPopoverTrigger #t="kjPopoverTrigger">Open popover</kj-button>
<kj-popover-content [kjFor]="t" kjSide="bottom" kjAlign="center">
  <h3 kjPopoverTitle>Notification settings</h3>
  <p>Control how and when you receive notifications.</p>
  <kj-button kjPopoverClose>Close</kj-button>
</kj-popover-content>