Tooltip

Short hint on Radix Tooltip that appears on hover or focus, with an arrow.

Installation

pnpm dlx shadcn@latest add @ward/tooltip

Add the Ward registry to components.json once:

"registries": {
  "@ward": "https://ward.so/r/{name}.json"
}

Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/tooltip.json

Usage

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild><Button variant="outline">Save</Button></TooltipTrigger>
    <TooltipContent side="bottom">Save changes to this collection</TooltipContent>
  </Tooltip>
</TooltipProvider>

Props

PropTypeDefaultDescription
TooltipProvider delayDurationnumber0Milliseconds to wait after hover before a tooltip opens. Every Tooltip must sit inside a TooltipProvider, and Radix throws without one.
openboolean-Whether the tooltip is open, when the parent controls it.
defaultOpenbooleanfalseWhether the tooltip starts open when it is uncontrolled.
onOpenChange(open: boolean) => void-Called when the tooltip opens or closes.
TooltipTrigger asChildbooleanfalseUse the child element as the trigger instead of rendering a button.
TooltipContent side"top" | "right" | "bottom" | "left""top"Side of the trigger the tooltip opens on; it flips if there is no room.
TooltipContent sideOffsetnumber0Gap in pixels between the trigger and the tooltip.
TooltipContent align"start" | "center" | "end""center"Alignment against the trigger along the chosen side.

Ward · Version 1.0.0 · Registry manifest