Tooltip

The Tooltip component presents a small, informative popup box that appears when a user hovers their mouse over or focuses on a specific element, providing supplementary details or context.

Docs API Reference

Setting Up the Tooltip Component

npx shadcn@latest add tooltip

Implementing the Tooltip Component

  Tooltip, // The main container for the tooltip
  TooltipContent, // Contains the content displayed within the tooltip popup
  TooltipProvider, // Provides context for tooltips within its subtree
  TooltipTrigger, // The element that triggers the tooltip to appear
} from "@/components/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Toggle Group