Tooltip

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

Demo

Hover over this button to see a tooltip.

Usage

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

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

API Reference

TooltipProvider

Provides context for all tooltips in the application.

Tooltip

The root component that manages tooltip state.

TooltipTrigger

The element that triggers the tooltip on hover/focus.

TooltipContent

The content that appears in the tooltip.

Accessibility

Keyboard Support

  • • Focus the trigger element with Tab
  • • Press Enter or Space to show tooltip
  • • Press Escape to hide tooltip

Screen Reader Support

  • • Tooltip content is announced by screen readers
  • • Proper ARIA attributes for tooltip role
  • • Focus management and announcements
HUD · Page · Tree
All systems operational
HUD · Page · Tree