WebStableSuperpositions

Web uniquement — React, depuis @krizaka/ui/tooltip. Stable : son API ne change qu’à une version majeure.

Quand l’utiliser

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

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`children`requis	`ReactNode`	—	The trigger, rendered as is (`asChild`): a focusable element.
`content`requis	`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`.

Accessibilité

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

Clavier

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

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Tooltip