Hacktron Design System

Tooltip

A short message shown on hover or focus, positioned relative to its trigger.

<template>
  <Tooltip text="Copy to clipboard">
    <IconButton icon="i-lucide-copy" variant="ghost" size="sm" />
  </Tooltip>
</template>

Props

Name Type Default
textstring
delayDurationnumber700 (reka-ui's own default)
content{ side?, sideOffset?, collisionPadding?, ... }{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }
...propsUTooltip props (kbds, arrow, portal, reference, disableClosingTrigger, ...)

Slots

Name Description
defaultThe trigger element the tooltip is anchored to.
contentEscape 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.

Usage