KikitaUiDocs

placement

align

triggerType

trigger label

title

description

ariaLabel

hoverDelay

offset

State

arrowtrapFocus

<button [kuiPopoverFor]="myPop" kuiButton type="button">Open</button>

<kui-popover #myPop>
  <div class="kui-popover-title">Title</div>
  <div class="kui-popover-desc">Supporting text.</div>
</kui-popover>

Name	Type	Default	Description
placement	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Preferred side of the anchor. Auto-flips to the opposite side to fit the viewport.
align	`'start' \| 'center' \| 'end'`	`'center'`	Alignment of the panel along the anchor edge. Preserved after a placement flip.
arrow	`boolean`	`false`	Shows the arrow caret pointing to the anchor.
triggerType	`'click' \| 'hover'`	`'click'`	click toggles the panel on click and closes on outside click or ESC. hover opens on mouseenter and closes on mouseleave.
ariaLabel	`string`	`'Popover'`	Accessible name for the role="dialog" panel. Prefer content-specific text.
hoverDelay	`number`	`100`	Delay in ms before closing on mouseleave in hover mode. Lets the mouse travel from trigger to panel.
offset	`number`	`8`	Gap in px between the anchor and the panel. The arrow adds 6px automatically.
trapFocus	`boolean`	`false`	Traps focus inside the panel and auto-focuses the first focusable element on open.
open	`boolean (model)`	`false`	Current open state exposed for trigger integrations via openChange. Not intended as a standalone controlled API.
[kuiPopoverFor]	`KuiPopoverComponent \| undefined`	`-`	Wires any element as a trigger for a kui-popover. Sets aria-expanded and aria-haspopup="dialog" automatically.
.kui-popover-title	`-`	`-`	Optional CSS class for a semi-bold sm title inside the projected content.
.kui-popover-desc	`-`	`-`	Optional CSS class for secondary sm supporting text inside the projected content.
--kui-popover-bg	`CSS custom property`	`var(--kui-color-surface-elevated)`	Panel background.
--kui-popover-border	`CSS custom property`	`var(--kui-color-border)`	Panel border color.
--kui-popover-radius	`CSS custom property`	`var(--kui-radius-lg)`	Panel corner radius.
--kui-popover-shadow	`CSS custom property`	`var(--kui-shadow-lg)`	Panel drop shadow.
--kui-popover-padding-x	`CSS custom property`	`var(--kui-space-4)`	Panel horizontal padding.
--kui-popover-padding-y	`CSS custom property`	`var(--kui-space-4)`	Panel vertical padding.
--kui-popover-min-width	`CSS custom property`	`160px`	Minimum panel width.
--kui-popover-max-width	`CSS custom property`	`320px`	Maximum panel width.
--kui-popover-arrow-size	`CSS custom property`	`10px`	Arrow caret size.
--kui-z-popover	`CSS custom property`	`400`	Panel z-index, between Dropdown (300) and Dialog (500).

Popover — Playground