Design System
Tooltip
Tooltips provide additional context when hovering over elements. They appear on hover and disappear when the cursor moves away.
Basic Usage
Tooltips require a TooltipProvider wrapper and work with any trigger element.
Tooltip
Positions
Tooltips can be positioned on any side of the trigger element.
Top
Right
Bottom
Left
Usage
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
export function MyComponent() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button>Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}Material 3 Features
- Elevation: Uses Material 3 elevation-md for proper depth
- Surface Container: Uses surface-container-high for background
- Positioning: Automatic positioning with collision detection
- Animation: Smooth fade and zoom animations
- Z-Index: Uses z-tooltip token for proper layering