Components

Tooltip and popover

Both arrive from their trigger, not from nowhere: the tooltip slides 3px from the side it opens on, the popover scales up from its anchor. Positioning, collision and focus behaviour come from Radix.

import {
  Button,
  Checkbox,
  Field,
  IconButton,
  Input,
  Kbd,
  PopoverContent,
  PopoverRoot,
  PopoverTrigger,
  Switch,
  Tooltip,
} from "@luc/ui";

Tooltip

Hover or focus a trigger. Tooltips are for clarification — never the only place an essential label lives.

<Tooltip content="Run the backtest" hint="⌘↵">
  <Button>Run</Button>
</Tooltip>

Popover

A small floating surface for filters, quick settings and menus. Collision handling flips it when there is no room.

<PopoverRoot>
  <PopoverTrigger asChild><Button>Filters</Button></PopoverTrigger>
  <PopoverContent width="sm">…</PopoverContent>
</PopoverRoot>

Inside a filter bar

The composition these components exist for.

Pending

API

Component props
Prop	Type	Default	Notes
`Tooltip content`	`ReactNode`	`—`	Short clarifying text — one line, no interactive content.
`Tooltip side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Placement preference; Radix flips it when space runs out.
`Tooltip hint`	`ReactNode`	`—`	Renders a keyboard hint chip next to the label.
`PopoverContent width`	`"auto" \| "sm" \| "md" \| "lg"`	`"auto"`	Common floating-surface widths.
`PopoverContent align / sideOffset`	`"start" \| "center" \| "end" / number`	`"center" / 6`	Anchored to the trigger.

Rules

Keep tooltips to a single short sentence.
Use a popover for anything with a control inside it.
Return focus to the trigger when a popover closes.

Don't

Hide required information in a tooltip.
Put a form that needs scrolling in a tooltip.
Open a popover on hover only — it must be keyboard reachable.