Tooltip

A short popup shown on hover or focus.

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
import { Button } from '@/components/ui/button'

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
        <TooltipContent>Add to library</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/tooltip.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Tooltip imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
import { Button } from '@/components/ui/button'

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

Name	Type	Default	Description
delay	number	600	Milliseconds to wait before opening on hover (set on TooltipTrigger).
side	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Which side of the trigger the tooltip is positioned on (set on TooltipContent).
sideOffset	number	8	Gap between the trigger and the tooltip, in pixels.
open / onOpenChange	boolean / (open: boolean) => void	—	Control the open state from outside (set on Tooltip).