02 — COMPONENTS
Tooltip
Compact helper component for microcopy, interface clarification, and subtle product guidance. Built from shadcn/ui and adapted to the Chuv Studio foundation with straight edges and consistent type.
Use Cases
Short contextual hints that support an action without competing with the main content
<Tooltip>
<TooltipTrigger>Hover action</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip><TooltipTrigger> <CircleHelp /> </TooltipTrigger>
Studio Contexts
Patterns that make sense for portfolio sections, service descriptions, and tool explanations
Portfolio Hint
Tool Stack
Service Clarifier
<TooltipContent> <TooltipText tone="tool" /> </TooltipContent>
Placements
Use side and alignment intentionally based on where the trigger sits inside the section
<TooltipContent side="top" align="center"> ... </TooltipContent>
<TooltipContent side="right" align="start"> ... </TooltipContent>
<TooltipContent side="bottom" align="end"> ... </TooltipContent>
Interactive Demo
Adjust tooltip message tone, placement, alignment, and open delay
Message Tone
Side
Align
Delay
Usage
Import, key props, and good practices
Import
import {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
} from "@/components/ui/tooltip"Key Props
Use side, align, sideOffset, and delay to control position and timing.
When To Use
Tooltips are best for brief clarifications, labels for icons, and supplementary hints.
When Not To Use
Do not place critical information exclusively inside a tooltip. The UI should still work without it.
Accessibility Notes
Tooltip is available on hover and focus. Keep trigger elements meaningful and ensure keyboard users can reach them.