Tooltip

A small popup that appears on hover to provide additional context. Must be wrapped in a TooltipProvider.

Basic Tooltip

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

PropTypeDefaultDescription
content
required
React.ReactNode—The content displayed inside the tooltip. Passed as children of TooltipContent.
side"top" | "right" | "bottom" | "left""top"The preferred side of the trigger to render the tooltip.
align"start" | "center" | "end""center"The preferred alignment against the trigger.