Tooltip

Installation

npx asteria-ui add tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="secondary">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>Helpful info</TooltipContent>
  </Tooltip>
</TooltipProvider>

A dark inverted surface (bg-fg-primary background, text-bg-primary text) — a deliberate surface inversion, not a mistake. Uses Radix's own Arrow primitive rather than a hand-rolled CSS triangle, since it measures and positions itself correctly across all four sides for free.

Examples

Sides

API reference

Tooltip, TooltipProvider, and TooltipTrigger are direct re-exports of Radix's own primitives — see Radix's Tooltip docs for their full prop surface (delayDuration, disableHoverableContent, etc).

TooltipContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"top"	Which side of the trigger to render on (Radix Popper prop).
sideOffset	number	6	Distance from the trigger, in pixels.
align	"start" \| "center" \| "end"	"center"	Alignment along the given side (Radix Popper prop).

Accessibility

Role. role="tooltip", set by Radix.
Trigger. Shows on hover or keyboard focus.
Dismiss. Escape closes it.
Linking. Connected to its trigger via aria-describedby, handled by Radix.
Not interactive. Tooltip content is not focusable and shouldn't contain interactive elements.