When To Use
- Use Tooltip when content needs to appear in context without forcing a full page transition.
- Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
- Review the examples below to compare trigger styles, content density, and dismissal expectations.
When Not To Use
- Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
- Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.
Accessibility Notes
- Move focus into the overlay when it opens and return focus to the trigger when it closes.
- Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
- Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.
Key Props / API
Key exports
TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent
Example Code
import {
Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,
} from "@hilum/ui"
import { Button } from "@hilum/ui"
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="outline"><Volume2 size={15} /></Button>
</TooltipTrigger>
<TooltipContent>Preview voice</TooltipContent>
</Tooltip>
</TooltipProvider>Tooltip
Default
Hover tooltip with dark background