Popover
stable 2.6 kB<hk-popover>An anchored panel that flips and shifts to stay on screen. Positioned from the trigger rect, so a scrolling container cannot clip it. Placement is one string — a side, plus an alignment when it is not centred — and the panel and its arrow both derive from it, so they cannot end up pointing different ways.
#flyout#anchor
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| placement | 'top' | 'right' | 'bottom' | 'left' | `${Side}-start` | `${Side}-end` | 'bottom' | Side plus optional alignment — the only two decisions there are. The panel and its arrow both derive from it, so they cannot disagree. |
| flip | boolean | true | What separates a placement preference from a promise: a panel that would leave the viewport swaps to the opposite side rather than being clipped. |
| shift | boolean | true | Slides the panel along its edge to stay on screen before resorting to a flip. |
| trigger | 'click' | 'hover' | 'click' | What opens it. |
| offset | number | 8 | Gap between trigger and panel, in px. |
| arrow | boolean | true | Draws the pointer toward the trigger. |
Outputs
openChangeEventEmitter<boolean>Emits on open and close.
Keyboard
- Enter / Space Opens from the trigger
- Escape Closes and restores focus
- Tab Moves into the panel content
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-popover-bg | #ffffff | Panel background. |
| --hk-popover-shadow | 0 18px 40px rgb(15 23 42 / 0.14) | Panel shadow. |
Accessibility
- The trigger carries aria-expanded and aria-controls, so its state is announced.
- Unlike a tooltip the panel is interactive and focusable — it is a dialog, and is labelled as one.