Components
Tooltip
A brief text label that appears on hover or focus. Built on Radix Tooltip with token-driven delay, offset, and styling.
Import
import { Tooltip, TooltipProvider } from "@sigil-ui/components";Preview
Setup
Wrap your app in <TooltipProvider>:
<TooltipProvider>
<App />
</TooltipProvider>Usage
Tooltip is a wrapper component. Pass content for the tooltip text and a single element as children (via asChild):
<Tooltip content="More information">
<Button variant="ghost" size="sm">
<InfoIcon className="size-4" />
</Button>
</Tooltip>Placement
<Tooltip content="Above" side="top"><Button>Top</Button></Tooltip>
<Tooltip content="Right" side="right"><Button>Right</Button></Tooltip>
<Tooltip content="Below" side="bottom"><Button>Bottom</Button></Tooltip>
<Tooltip content="Left" side="left"><Button>Left</Button></Tooltip>Custom delay
<TooltipProvider delayDuration={0}>
<Tooltip content="No delay">
<Button>Instant tooltip</Button>
</Tooltip>
</TooltipProvider>Token integration
| CSS Variable | Used for |
|---|---|
--s-surface | Tooltip background |
--s-text | Tooltip text color |
--s-radius-sm | Border radius |
--s-shadow-sm | Subtle elevation |
--s-duration-fast | Fade animation |
--s-font-size-sm | Text size |
Props
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | — | Tooltip text |
side | "top" | "right" | "bottom" | "left" | "top" | Preferred side |
delayDuration | number | 200 | Open delay in ms |
children | ReactNode | — | Single trigger element (via asChild) |
TooltipProvider
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 400 | Open delay in ms |
Accessibility
- Tooltip appears on both hover and focus
- Content is linked via
aria-describedby - Escape closes the tooltip
- Children must be a single element (required by
asChild) - Follows WAI-ARIA Tooltip pattern