Inputs & feedback
Tooltip
Hover or focus to reveal. Glass-strong surface, configurable delay, four positions. Renders through `createPortal(document.body)` to escape any backdrop-filter ancestor.
Tooltip is the hover/focus reveal. Spring-entrance, glass-strong surface, four positions (top, bottom, left, right), configurable delay. The component renders through createPortal(document.body) so backdrop-filter ancestors don't form a containing block that clips it — a common bug that the kit's portal pattern dodges.
Example
tsx
import { Tooltip, Button } from '@kidcash/ui';
<Tooltip content="Adds $5 to this kid's allowance" placement="top">
<Button variant="secondary">+ $5</Button>
</Tooltip>Try it live
← Back to the playground to see Tooltip rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.