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' \| undefined`	`undefined`	Preferred side of the anchor (defaults.popover.placement, then bottom). Auto-flips to the opposite side to fit the viewport.
align	`'start' \| 'center' \| 'end' \| undefined`	`undefined`	Alignment of the panel along the anchor edge (defaults.popover.align, then center). Preserved after a placement flip.
arrow	`boolean \| undefined`	`undefined`	Shows the arrow caret pointing to the anchor. Falls back to defaults.popover.arrow, then false.
triggerType	`'click' \| 'hover' \| undefined`	`undefined`	Falls back to defaults.popover.triggerType, then click. click toggles the panel on click and closes on outside click or ESC. hover opens on mouseenter and closes on mouseleave.
ariaLabel	`string \| undefined`	`undefined`	Accessible name for the role="dialog" panel. Falls back to the popover.label message (Popover); prefer content-specific text.
hoverDelay	`number \| undefined`	`undefined`	Delay in ms before closing on mouseleave in hover mode (defaults.popover.hoverDelay, then 100). Lets the mouse travel from trigger to panel.
offset	`number \| undefined`	`undefined`	Gap in px between the anchor and the panel (defaults.popover.offset, then 8). The arrow adds 6px automatically. A static numeric string is coerced.
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]	`KuiPopover \| 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 in browsers without the Popover API.
openFor(anchor)	`(anchor: Element) => void`	`-`	Opens the popover anchored to the given element.
toggleFor(anchor)	`(anchor: Element) => void`	`-`	Toggles the popover for a trigger and reopens immediately when an exit animation is running.
close()	`() => void`	`-`	Closes the popover with the exit animation.
scheduleClose(delay)	`(delay: number) => void`	`-`	Schedules a close after delay ms (hover mode).
cancelClose()	`() => void`	`-`	Cancels a pending scheduled close.
KuiPopoverOptions	`interface`	`-`	Shape of defaults.popover: placement, offset, align, arrow, triggerType and hoverDelay.

Popover — Playground