Tooltip

Tooltip shows a short, informational label when its trigger is hovered or focused. It is built on Radix: open/close, portalled positioning, role="tooltip" + aria-describedby, and Escape-to-close are handled for you. Keep the content text-only — for interactive content, use a Popover instead.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

Wrap the trigger; pass the label as content. The trigger is rendered via Radix asChild, so your element (a button, link, icon) keeps its own markup.

import { Tooltip, Button } from '@infinitibit_gmbh/ui';

export function Example() {
  return (
    <Tooltip content="Prompt text">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Placement

side picks the edge (top default, right, bottom, left) and align positions along it (start, center default, end) — together they cover the eight directions.

<Tooltip content="Prompt text" side="right" align="start">
  <Button>Trigger</Button>
</Tooltip>

API

Prop	Type	Default	Description
content	ReactNode	—	The tooltip label (informational only)
side	'top' | 'right' | 'bottom' | 'left'	'top'	Preferred side of the trigger
align	'start' | 'center' | 'end'	'center'	Alignment along the side
delayDuration	number	200	Hover delay before opening (ms)
children	ReactNode	—	The trigger element (Radix asChild)

Accessibility

• Opens on hover and keyboard focus; closes on Escape or blur.
• The content has role="tooltip"; the trigger gets aria-describedby while open.
• Hidden content is not exposed to screen readers (Radix manages this).