Overlay

Popover

Click-triggered popover. Compose `[kjPopoverTrigger]` + `<kj-popover-content [kjFor]="t">` with optional `[kjPopoverTitle]` heading and `[kjPopoverClose]` button. The wrapper itself only projects content — its purpose is to host the docs tags.

Import

#import

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

import { KjPopoverComponent } 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>