Tooltip Button

Icon button that displays contextual help in a tooltip on hover or focus.

Installation

bash

pnpm dlx shadcn@latest add @cs/tooltip-button

tsx

import { TooltipButton } from "@/components/cs/tooltip-button"
import { Save } from "lucide-react"

tsx

<TooltipButton tooltip="Save changes" aria-label="Save changes">
  <Save />
</TooltipButton>

Icon button that shows contextual help in a tooltip on hover or focus.

Name	Type	Default	Description
size	"icon" \| "default" \| "xs" \| "lg" \| "sm" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined	"icon"	-
tooltip *	ReactNode	-	Content displayed when the button is hovered or focused.
variant	"link" \| "default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| null \| undefined	-	-