Iryx UIOverlays
IPopover
A panel anchored to whatever opened it, for content too big for a tooltip and too small for a dialog. Unlike ITooltip it takes focus and can hold interactive content; unlike IDialog it leaves the page usable behind it.
Holding a form
Set modal when the panel contains something to fill in: focus is trapped and the page behind goes inert. The default slot receives a close function.
Placement
side and align position the panel against its trigger, and arrow draws a pointer back to it.
The panel flips to the opposite side rather than running off the viewport, so side is a preference.
Width and padding
The panel has a width by default. Set width="none" for content that knows its own size — a colour grid, a menu, an image.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Two-way via v-model:open |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred side; flips to stay on screen |
align | 'start' | 'center' | 'end' | 'center' | |
sideOffset | number | 6 | Gap between panel and trigger |
arrow | boolean | false | Draw a pointer back to the trigger |
modal | boolean | false | Trap focus and make the page inert |
showClose | boolean | false | Close button in the corner |
closeLabel | string | 'Close' | Names that button |
title | string | — | Heading line; the only row inset to clear the close button |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | |
width | 'none' | 'sm' | 'md' | 'lg' | 'md' | none lets the content size itself |
ariaLabel | string | — | Names the panel |
unstyled | boolean | — | Skip built-in classes |
ui | { content?, arrow?, close? } | — | Per-slot class overrides |
Slots
| Slot | Props | Description |
|---|---|---|
trigger | — | What opens the popover |
title | — | Replaces the heading line |
default | { close } | The panel's content |
Accessibility
The panel is a dialog to assistive technology, so name it with ariaLabel. Escape closes it and focus returns to the trigger; with modal, focus is trapped inside while it is open.
The close button overlaps the panel's own padding, so content still reaches the full width. Only title is inset to make room for it.