Tooltip

Displays brief, contextual information when users hover or focus on an element. Helps clarify icon-only actions or complex terms.

Code

Installation

npx shadcn@latest add tooltip

Basic Example

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Reference

Props

Prop	Type	Default	Description
side	string	"top"	Tooltip position. Options: top, right, bottom, left
sideOffset	number	4	Distance from trigger element
delayDuration	number	700	Delay before showing tooltip (ms)

Positions

With Icon

Usage Guidelines

When to Use

Use tooltips to provide additional context, explanations, or helpful information about UI elements. They work well for icon buttons, abbreviations, and controls that benefit from extra explanation.

Tooltips should contain supplementary information, not essential content. Don't rely on tooltips for critical information that users need to complete tasks.

Best Practices

Keep tooltip text concise and scannable
Use tooltips for icon-only buttons to explain their purpose
Position tooltips to avoid covering important content
Don't use tooltips for information that's always needed
Ensure tooltips work on both hover and focus

Accessibility

Tooltips are automatically accessible via keyboard focus. When an element with a tooltip receives focus, the tooltip is announced to screen readers. Ensure tooltip content is descriptive and helpful.

Tooltips should not be the only way to access important information. Ensure that critical information is also available through other means, such as visible labels or accessible descriptions.

Rhetoric-ds