Components
Tooltip
A popup that displays information related to an element on hover.
Tooltip
The Tooltip component displays additional information when users hover over or focus on an element. It's useful for providing context, explanations, or hints without cluttering the interface.
Wrap your app with TooltipProvider to enable tooltips and configure global settings.
Features
- Hover and focus activation
- Configurable delay duration
- Multiple positioning options
- Skip delay on quick successive hovers
- Hoverable content option
- Portal rendering for proper stacking
- Arrow indicator support
Usage
import {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
} from '@loke/design-system/tooltip';
// Wrap your app with TooltipProvider
function App() {
return (
<TooltipProvider>
<YourApp />
</TooltipProvider>
);
}
// Use tooltips anywhere
function MyComponent() {
return (
<Tooltip>
<TooltipTrigger>Hover me</TooltipTrigger>
<TooltipContent>
<p>Helpful information</p>
</TooltipContent>
</Tooltip>
);
}Tips:
- Place
TooltipProviderat your app root. - Use
asChildonTooltipTriggerto use your own element. - Keep tooltip content brief and helpful.
Props
TooltipProvider
Prop
Type
Tooltip
Prop
Type
TooltipContent
Prop
Type
Examples
Basic tooltip
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>Different sides
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">
<p>Tooltip on top</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">
<p>Tooltip on right</p>
</TooltipContent>
</Tooltip>With delay
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">No delay</Button>
</TooltipTrigger>
<TooltipContent>
<p>Instant tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>With arrow
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">With arrow</Button>
</TooltipTrigger>
<TooltipContent>
<p>Tooltip with arrow</p>
<TooltipArrow />
</TooltipContent>
</Tooltip>Accessibility
- Tooltip content is linked via
aria-describedby. - Triggers are focusable and show tooltip on focus.
- Escape key dismisses the tooltip.
- Tooltip closes when trigger is clicked.
- Content is announced to screen readers.
- Hover intent prevents accidental triggers.
Best practices
- Keep tooltip content brief and scannable.
- Use tooltips to supplement, not replace, visible labels.
- Don't put essential information only in tooltips.
- Avoid tooltips on touch devices—consider alternatives.
- Use consistent delay durations across your app.
- Position tooltips to avoid covering important content.
- Don't nest interactive elements inside tooltips.
- Consider using
disableHoverableContentfor simple tooltips.