Components
Tooltip
A short glass hint on hover or keyboard focus, describing its trigger to screen readers.
Beta feature
This feature is still in preview and may change.
Import
import { Tooltip, TooltipTrigger, TooltipContent } from '@rinzai/zen';API reference
<Tooltip>
A short hint shown while the pointer is over its trigger or the trigger has keyboard focus; Escape hides it. The trigger is described by it for screen readers. Put a TooltipTrigger and a TooltipContent inside. For anything to click or fill in, use Popover.
No props of its own; it accepts the props of the element it renders.
<TooltipTrigger>
What the tooltip describes: a button by default. With asChild, your own focusable element instead.
| Prop | Type | Default |
|---|---|---|
asChildPut the trigger's props on your own focusable element instead of rendering a button. | boolean | — |
<TooltipContent>
The hint: glass, below the trigger (above it if there's no room), centred on it by default.
| Prop | Type | Default |
|---|---|---|
alignCentred on the trigger (default), or lined up with its start or end edge. | "center" | "end" | "start" | center |
offsetGap from the trigger, in px. | number | 5 |