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