Tooltip
Hand-drawn tooltips that follow their trigger on every side.
Sides
AlignmentRelative to the trigger edge
Paper textures
Icon trigger
Long textWraps at max-width
Installation
Add Tooltip with the shadcn CLI.
npx shadcn@latest add https://sketchcn.chuwii.com/r/tooltip.json
Examples
Wrap the app in TooltipProvider once, then pair a trigger with its content.
Setup

Render <TooltipProvider> once near the root of your app so every tooltip shares one open delay.

import { TooltipProvider } from "@/components/ui/tooltip";

export function App({ children }: { children: React.ReactNode }) {
  return <TooltipProvider>{children}</TooltipProvider>;
}
Icon button
import { Palette } from "@boxicons/react";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export function PaletteButton() {
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="outline" size="icon" aria-label="Palette">
            <Palette />
          </Button>
        }
      />
      <TooltipContent>Change the palette</TooltipContent>
    </Tooltip>
  );
}
Side and offset
<Tooltip>
  <TooltipTrigger render={<Button variant="outline">Layers</Button>} />
  <TooltipContent side="right" sideOffset={12}>
    Show the layer panel
  </TooltipContent>
</Tooltip>
Paper texture
<Tooltip>
  <TooltipTrigger render={<Button variant="outline">Grid</Button>} />
  <TooltipContent variant="graph">Snap strokes to the grid</TooltipContent>
</Tooltip>
No delay
<TooltipProvider delay={0}>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline">Instant</Button>} />
    <TooltipContent>Opens with no delay</TooltipContent>
  </Tooltip>
</TooltipProvider>