WebStableOverlays

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

When to use

To name an icon button for sighted mouse users: copy, share, more.
To show a shortcut next to an action.

When not 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.

Installation

Install

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

Styles

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

Import

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

Examples

Top

Above its trigger (the default).

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

export default function TooltipTop({ defaultOpen = false }: { defaultOpen?: boolean }) {
  return (
    <Tooltip content="Copy the link" defaultOpen={defaultOpen}>
      <IconButton label="Copy" variant="outline">
        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
          <rect x="9" y="9" width="12" height="12" rx="2" />
          <path d="M5 15V5a2 2 0 0 1 2-2h10" />
        </svg>
      </IconButton>
    </Tooltip>
  );
}

Right

side="right".

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

export default function TooltipRight({ defaultOpen = false }: { defaultOpen?: boolean }) {
  return (
    <Tooltip content="Copy the link" side="right" defaultOpen={defaultOpen}>
      <IconButton label="Copy" variant="outline">
        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
          <rect x="9" y="9" width="12" height="12" rx="2" />
          <path d="M5 15V5a2 2 0 0 1 2-2h10" />
        </svg>
      </IconButton>
    </Tooltip>
  );
}

Props

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`.

Accessibility

Radix Tooltip: role="tooltip", linked to the trigger by aria-describedby.
It opens on hover after delayDuration (300 ms) and never holds focus.

Keyboard

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

Best practices

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 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Tooltip