Tooltip

A short label on a light slab cut on both sides. One line only: its height is known, so it can be a slab rather than a panel.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/tooltip

Examples

Three sides

tooltip-basic.tsx

import { Button } from "@/components/zero/button";import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from "@/components/zero/tooltip";export default function TooltipBasic() {  return (    <TooltipProvider>      {(["top", "right", "bottom"] as const).map((side) => (        <Tooltip key={side}>          <TooltipTrigger render={<Button variant="ghost" />}>            Hover ({side})          </TooltipTrigger>          <TooltipContent side={side}>Opens the job board</TooltipContent>        </Tooltip>      ))}    </TooltipProvider>  );}

Behaviour

It opens on hover and on keyboard focus after a short delay, and closes when the pointer leaves. Inside one TooltipProvider, moving from one trigger to the next opens the next tooltip at once.

Keep it to a few words; anything longer belongs in a Popover.

Props

TooltipContent

Prop	Type	Default	Description
side	"top" \| "bottom" \| "left" \| "right"	"top"	Where it opens from the trigger.

Also takes every prop of Base UI's Tooltip.Popup.

TooltipProvider

Prop	Type	Default	Description
delay	number	400	Milliseconds of hover before the first tooltip opens.

Also takes every prop of Base UI's Tooltip.Provider.