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 https://9ui.dev/r/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,
	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">
			{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>
			))}
		</div>
	)
}