ui
GitHub

Tooltip

Used to provide context or hints for elements.

Docs
tooltip-demo.tsx
import { Icons } from "@/components/icons"
import { buttonVariants } from "@/components/ui/button"
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip"
 
export function TooltipDemo() {
	return (
		<Tooltip>
			<TooltipTrigger
				className={buttonVariants({ variant: "outline", size: "icon" })}
			>
				<Icons.twitter />
			</TooltipTrigger>
			<TooltipContent>
				<span>
					Follow me{" "}
					<a
						className="font-medium"
						href="https://x.com/borabalogluu"
						target="_blank"
					>
						@borabalogluu
					</a>
				</span>
			</TooltipContent>
		</Tooltip>
	)
}

Installation

npx shadcn@latest add @9ui/tooltip

Usage

Imports
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip"
Anatomy
<Tooltip>
	<TooltipTrigger />
	<TooltipContent />
</Tooltip>

Examples

Custom Position

tooltip-custom-position.tsx
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "@/components/ui/tooltip"
 
const positions = ["top", "right", "bottom", "left"] as const
 
export function TooltipCustomPosition() {
	return (
		<div className="grid grid-cols-2 gap-2">
			<TooltipProvider>
				{positions.map((position) => (
					<Tooltip key={position}>
						<TooltipTrigger className="w-full rounded-md border px-2 py-1.5 text-sm">
							{position}
						</TooltipTrigger>
						<TooltipContent className="max-w-56" side={position}>
							<span>This tooltip is positioned at the {position} side.</span>
						</TooltipContent>
					</Tooltip>
				))}
			</TooltipProvider>
		</div>
	)
}