Composants
Tooltip
A short label shown on hover and on keyboard focus, next to its trigger.
Web uniquement — React, depuis @krizaka/ui/tooltip. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orochia, Orazaka.
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
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Tooltip } from "@krizaka/ui/tooltip";Exemples
Top
Above its trigger (the default).
Right
side="right".
Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
childrenrequis | ReactNode | — | The trigger, rendered as is (asChild): a focusable element. |
contentrequis | 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 byaria-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
IconButtonlabel); the tooltip repeats it for the eye.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub