Iryx UIOverlays
ITooltip
A short label for a control that cannot say what it does in the space it has. Opens on hover and on keyboard focus, so it is not mouse-only.
An icon-only trigger still needs its own aria-label: the tooltip adds to the name rather than supplying it.
Sides
The side is a preference: the tooltip flips when there is not enough room on that edge.
Alignment and offset
Arrow
Delay
delay is how long the pointer must rest before the tooltip opens, in milliseconds. Lower it for a toolbar the reader scans across; raise it where a passing hover should open nothing.
Rich content
Use the content slot when the tooltip needs markup. It closes as soon as the pointer leaves, so anything the reader has to interact with belongs in an IPopover or a dialog.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | Tooltip text, as an alternative to the content slot |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Preferred edge; flips when it will not fit |
align | 'start' | 'center' | 'end' | 'center' | Alignment along that edge |
sideOffset | number | 6 | Distance from the trigger, in px |
delay | number | 300 | Hover delay before opening, in ms |
arrow | boolean | false | Draws a pointer toward the trigger |
disabled | boolean | false | Never opens |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { content?, arrow? } | — | Per-element class overrides |
v-model:open controls it directly when you need to open one programmatically.
Slots
| Slot | When to use it |
|---|---|
trigger | The element the tooltip describes. Required — there is no default slot |
content | Tooltip content with markup, instead of text |
Tooltips do not open on touch, so keep anything essential readable without one.