Tooltip
Tooltip Component
Hover tooltips with configurable positioning, delay, and accessible labeling. Wraps any element.
Import
import { Tooltip } from '@covers/ui';Usage
import {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
} from '@covers/ui';
// Wrap your app (or layout) with TooltipProvider
<TooltipProvider>
<App />
</TooltipProvider>
// Top (default)
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
// Bottom placement
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">
<Info className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>More information</p>
</TooltipContent>
</Tooltip>
// Left and right
<Tooltip>
<TooltipTrigger asChild>
<span className="underline cursor-help">API Key</span>
</TooltipTrigger>
<TooltipContent side="right">
<p>Found in Settings → Developer</p>
</TooltipContent>
</Tooltip>
// Custom delay
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Button>Instant tooltip</Button>
</TooltipTrigger>
<TooltipContent>
<p>No delay on hover</p>
</TooltipContent>
</Tooltip>Props
| Name | Type | Description |
|---|---|---|
| content | ReactNode | Tooltip content (passed to TooltipContent) |
| side | "top" | "bottom" | "left" | "right" | Preferred placement of the tooltip |
| delayDuration | number | Delay in ms before tooltip appears (default 400) |
Default Styling
bg-slate-950 text-slate-50 border border-slate-700 rounded-md px-3 py-1.5 text-sm shadow-md
Part of CoverKit
This component is part of CoverKit (@covers/ui), a dark-first React component library.