Installation
pnpm dlx shadcn@latest add @cortexcn/tooltipUsage
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/tooltip";Examples
Basic
import { Button } from "@/components/button"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"export function TooltipBasic() { return ( <div className="flex flex-col gap-6"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline" className="w-fit"> Show Tooltip </Button> </TooltipTrigger> <TooltipContent> <p>Add to library</p> </TooltipContent> </Tooltip> </div> )}Sides
import { Button } from "@/components/button"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"export function TooltipSides() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap gap-2"> {(["top", "right", "bottom", "left"] as const).map((side) => ( <Tooltip key={side}> <TooltipTrigger asChild> <Button variant="outline" className="w-fit capitalize style-sera:uppercase" > {side} </Button> </TooltipTrigger> <TooltipContent side={side}> <p>Add to library</p> </TooltipContent> </Tooltip> ))} </div> </div> )}With icon
import { Button } from "@/components/button"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"import { InfoIcon } from "lucide-react"export function TooltipWithIcon() { return ( <div className="flex flex-col gap-6"> <Tooltip> <TooltipTrigger asChild> <Button variant="ghost" size="icon"> <InfoIcon /> <span className="sr-only">Info</span> </Button> </TooltipTrigger> <TooltipContent> <p>Additional information</p> </TooltipContent> </Tooltip> </div> )}Long content
import { Button } from "@/components/button"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"export function TooltipLongContent() { return ( <div className="flex flex-col gap-6"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline" className="w-fit"> Show Tooltip </Button> </TooltipTrigger> <TooltipContent> To learn more about how this works, check out the docs. If you have any questions, please reach out to us. </TooltipContent> </Tooltip> </div> )}Disabled
import { Button } from "@/components/button"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"export function TooltipDisabled() { return ( <div className="flex flex-col gap-6"> <Tooltip> <TooltipTrigger asChild> <span className="inline-block w-fit"> <Button variant="outline" disabled> Disabled </Button> </span> </TooltipTrigger> <TooltipContent> <p>This feature is currently unavailable</p> </TooltipContent> </Tooltip> </div> )}With keyboard shortcut
import { Button } from "@/components/button"import { Kbd } from "@/components/kbd"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"import { SaveIcon } from "lucide-react"export function TooltipWithKeyboard() { return ( <div className="flex flex-col gap-6"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline" size="icon-sm"> <SaveIcon /> </Button> </TooltipTrigger> <TooltipContent> Save Changes <Kbd>S</Kbd> </TooltipContent> </Tooltip> </div> )}On link
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"export function TooltipOnLink() { return ( <div className="flex flex-col gap-6"> <Tooltip> <TooltipTrigger asChild> <a href="#" className="w-fit text-sm text-primary underline-offset-4 hover:underline" onClick={(e) => e.preventDefault()} > Learn more </a> </TooltipTrigger> <TooltipContent> <p>Click to read the documentation</p> </TooltipContent> </Tooltip> </div> )}Formatted content
import { Button } from "@/components/button"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"export function TooltipFormatted() { return ( <div className="flex flex-col gap-6"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline" className="w-fit"> Status </Button> </TooltipTrigger> <TooltipContent> <div className="flex flex-col gap-1"> <p className="font-semibold">Active</p> <p className="text-xs opacity-80">Last updated 2 hours ago</p> </div> </TooltipContent> </Tooltip> </div> )}Adapted from the shadcn/ui Tooltip (MIT).