Tooltip
A short message that appears when the user hovers or focuses an element.
<template> <Tooltip text="Copy to clipboard"> <IconButton icon="i-lucide-copy" variant="ghost" size="sm" /> </Tooltip></template>Props
| Name | Type | Default |
|---|---|---|
| text | string | - |
| delayDuration | number | 700 (reka-ui's own default) |
| content | { side?, sideOffset?, collisionPadding?, ... } | { side: 'bottom', sideOffset: 8, collisionPadding: 8 } |
| ...props | UTooltip props (kbds, arrow, portal, reference, disableClosingTrigger, ...) | - |
Slots
| Name | Description |
|---|---|
| default | The trigger element the tooltip is anchored to. |
| content | Escape hatch: fully replaces the tooltip panel's content instead of the `text` prop. Only forwarded when actually provided - otherwise UTooltip's own text/kbds rendering is left untouched. |
Guidelines
Do
- Use for supplemental context that isn't essential to complete the task - e.g. explaining why a control is disabled, or spelling out a truncated value.
- Keep the text short - one line, no interactive content.
Don't
- Don't put essential information only in a tooltip - keyboard and touch users may never trigger it.
- Don't use a tooltip for a long paragraph or interactive content - use a Popover-style panel instead.