Components / Tooltip

Tooltip

<Tooltip />Stable

Hover or focus reveals a short label. Use for icon-only controls or to clarify a label — never for required information. Built on Radix Tooltip.

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

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Code

import { Tooltip } from "@/components/upnext";


<Tooltip>Tooltip text</Tooltip>

Sides

<Tooltip>
  <TooltipTrigger asChild><Button variant="outline">Hover me</Button></TooltipTrigger>
  <TooltipContent side="top">Default tooltip on top</TooltipContent>
</Tooltip>

Composition

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="md" iconOnly><Info /></Button>
  </TooltipTrigger>
  <TooltipContent>Why we recommend this recruit</TooltipContent>
</Tooltip>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.