Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

npx shadcn@latest add tooltip

Usage

Import and use the tooltip component in your project.

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function MyComponent() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover</TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Examples

Default

A simple tooltip with text content.

With Icon Button

Tooltip on an icon button.

API Reference

Props available for the Tooltip component.

TooltipProvider

Prop	Type	Default	Description
delayDuration	number	700	The delay in ms before the tooltip appears.
skipDelayDuration	number	300	How long a user has to wait before another tooltip shows.

Tooltip

Prop	Type	Default	Description
defaultOpen	boolean	false	Whether the tooltip is open by default.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Callback when the open state changes.

TooltipTrigger

Prop	Type	Default	Description
asChild	boolean	false	Render as child component.

TooltipContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"top"	The preferred side of the trigger to render against.
sideOffset	number	4	The distance in pixels from the trigger.
align	"start" \| "center" \| "end"	"center"	The preferred alignment against the trigger.

Accessibility

Tooltip component follows WAI-ARIA tooltip pattern.

Keyboard Navigation

Tab: Shows the tooltip
Escape: Hides the tooltip

Content Guidelines

Keep tooltip content concise and informative. Tooltips should supplement, not replace, visible labels or instructions.