Tooltip

WebStableOverlays

Web only — React, from @krizaka/ui/tooltip. Stable: its API only changes in a major version.

Why it is here. Used by Orochia, Orazaka.

When to use

For information people need to complete a task: put it in the page.Use instead: Field
For interactive content (links, buttons).Use instead: Popover
On touch screens as the only label: there is no hover.

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Tooltip } from "@krizaka/ui/tooltip";

Above its trigger (the default).

side="right".

Prop	Type	Default	Description
`children`required	`ReactNode`	—	The trigger, rendered as is (`asChild`): a focusable element.
`content`required	`ReactNode`	—	What the tooltip says — passed translated.
`container`	`HTMLElement \| null`	—	The element the portal renders into (default: document.body).
`defaultOpen`	`boolean`	—	Open at first, uncontrolled.
`delayDuration`	`number`	`300`	Hover delay in ms before it opens (300 by default).
`onOpenChange`	`((open: boolean) => void)`	—	Called when it opens or closes.
`open`	`boolean`	—	Open or closed (controlled), with `onOpenChange`.

Keys	Action
`Tab`	Focusing the trigger shows the tooltip at once.
`Esc`	Hides it.

A few words, no punctuation: “Copy the link”.
The trigger keeps its own accessible name (an IconButton label); the tooltip repeats it for the eye.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub