ascii.cnlibs.com
GithubX

Tooltip

Info shown on hover or keyboard focus.

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/tooltip.json

## setup

Tooltips need one TooltipProvider at the root of the tree, so every tooltip in the app shares a delay group.

// app/layout.tsx (inside <body>)
import { TooltipProvider } from "@/components/ui/tooltip";

<TooltipProvider>{children}</TooltipProvider>

## usage

import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
<Tooltip>
  <TooltipTrigger render={<Button variant="outline">? hover</Button>} />
  <TooltipContent chWidth={24}>Disables auto-save</TooltipContent>
</Tooltip>

## side

side places the tooltip on any edge of the trigger.

## align

align shifts the tooltip along the chosen side.