@kit-ng-ui/popover

Click / hover / focus triggered overlay with a title and rich content for Kit UI. Mirrors ant-design's Popover.

Install

pnpm add @kit-ng-ui/popover @kit-ng-ui/core

Styles

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/popover/styles' as popover;

Use

import { Component } from '@angular/core';
import { KitPopoverComponent } from '@kit-ng-ui/popover';

@Component({
  standalone: true,
  imports: [KitPopoverComponent],
  template: `
    <!-- Title + content, click trigger -->
    <kit-popover title="Title" content="Useful info">
      <button>Click me</button>
    </kit-popover>

    <!-- Rich content + placement -->
    <kit-popover [titleTpl]="ttl" [contentTpl]="ctt" placement="rightTop">
      <kit-icon name="info" />
    </kit-popover>

    <ng-template #ttl>Server status</ng-template>
    <ng-template #ctt>
      <p>All systems nominal.</p>
      <a href="#">Open dashboard</a>
    </ng-template>

    <!-- No-title body -->
    <kit-popover content="quick note" trigger="hover">
      <button>Hover</button>
    </kit-popover>
  `,
})
export class Demo {}

API

<kit-popover>

| Input | Type | Default | Description | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- | | arrow | boolean | true | Show the arrow pointing at the trigger. | | content | string \| null | null | Body text. Ignored when [contentTpl] is set. | | contentTpl | TemplateRef \| null | null | Body template — overrides [content]. | | disabled | boolean | false | Disable the popover without removing it from the DOM. | | mouseEnterDelay | number | 100 | Open delay (ms) when trigger='hover'. | | mouseLeaveDelay | number | 100 | Close delay (ms) when trigger='hover'. | | open | boolean (two-way [(open)]) | false | Controlled open state. | | placement | 'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom' | 'top' | Overlay position relative to the trigger. | | title | string \| null | null | Header text. Header is omitted if both [title] and [titleTpl] are null. | | titleTpl | TemplateRef \| null | null | Header template — overrides [title]. | | trigger | 'hover' \| 'focus' \| 'click' | 'click' | What gesture opens the overlay. Defaults to 'click' to match ant-design. |

| Output | Type | Description | | --------------- | --------------------- | ------------------------------------------------- | | visibleChange | EventEmitter<boolean> | Fires when the open state changes. |

Behavior notes

• Default trigger is 'click' (vs tooltip's 'hover'). Popover content is interactive — hover would dismiss before the user can interact.
• Click trigger dismisses on outside click and Escape. Clicks inside the overlay do not propagate to the document listener, so embedded buttons and links work as expected. The outside-click listener attaches only while the popover is open.
• Header collapses when neither [title] nor [titleTpl] is set, and the body padding tightens to match <kit-tooltip> proportions.
• Inline positioning, not body-portalled — same caveat as @kit-ng-ui/tooltip. Use carefully near scroll containers.
• aria-describedby is applied to the first focusable descendant of the projected trigger (button, link, input, [tabindex]) so screen readers pick up the overlay text on focus.
• role="tooltip" (not dialog). v0.1 doesn't implement focus trapping or focus-return-on-close — both required for role="dialog" to be honest. A future revision that adds focus management can upgrade the role.
• Disable while open? Setting [disabled]=true while open auto-closes the popover.