Tooltip

Installation

npx shadcn@latest add @uqudo/tooltip

Usage

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</TooltipProvider>

Tooltip does not create its own provider, so every tooltip must sit inside a TooltipProvider. Render one near the root of your app rather than around each tooltip: tooltips that share a provider also share its delayDuration and skip the delay when the pointer moves from one trigger to the next.

TooltipContent renders through a portal, carries an arrow and sits flush against the trigger (sideOffset defaults to 0).

Examples

Sides

Pick where the tooltip appears with side on TooltipContent. It flips automatically when there is no room.

API Reference

TooltipProvider

Tooltip

TooltipTrigger

TooltipContent

Data attributes