Tooltip
A short label that appears on hover or focus, describing what a control does.
Usage
import { Tooltip, TooltipContent, TooltipTrigger } from "@kanzo-tech/ui";<Tooltip>
<TooltipTrigger asChild>
<Button aria-label="About grade 5" size="icon-md" variant="ghost">
<InfoIcon />
</Button>
</TooltipTrigger>
<TooltipContent>Grade 5 — a Writ. Requires a hall's seal and a written heir.</TooltipContent>
</Tooltip>A tooltip is not an accessible name. It is only reachable by hover and focus, so an icon-only
trigger still needs its own aria-label — the tooltip supplements that label, it does not
replace it. Never put interactive content inside one; use Popover or HoverCard for that.
Nothing focusable goes in a tooltip. It is role="tooltip", wired to the trigger with
aria-describedby, so its text is announced as part of the control — a link inside one is
unreachable by keyboard and is read out as part of the button's name. Reach for
Popover when the surface holds controls, and see
which of the three.
Anatomy
Tooltip
├── TooltipTrigger
└── TooltipContent (portal + positioner)
└── TooltipArrow (rendered for you)TooltipContent renders TooltipArrow itself, so there is nothing to assemble.
Placement
API Reference
Tooltip
| Prop | Type | Default |
|---|---|---|
positioning | PositioningOptions | { placement: "top" } |
openDelay | number | 0 |
closeDelay | number | 100 |
lazyMount | boolean | true |
unmountOnExit | boolean | true |
openDelay is 0 rather than Ark's default: these tooltips label toolbar icons, where a
delay reads as lag. The 100ms closeDelay is what lets the pointer cross the gap between
trigger and content without the tooltip flickering shut.
Extends React.ComponentProps<typeof ArkTooltip.Root>.