'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Capas
Tooltip
Una pista corta al pasar el mouse y con el foco del teclado. Los tooltips enriquecidos agregan un título en negrita; shortcut muestra la tecla.
import { TooltipTrigger, Tooltip } from '@alea/ui';
Ejemplos
Tooltip
Con hover después de una pequeña demora, y de inmediato con foco de teclado.
En texto y enlaces
Un tooltip explica, nunca es el único lugar de algo importante.
Contrast must be at least 4.5:1 for body text.
Tooltip enriquecido y atajo
title agrega una primera línea en negrita; shortcut muestra la tecla. Los tooltips no son interactivos: para enlaces, usa Toggletip.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border-strong…--alea-chip-bg…--alea-chip-text…--alea-surface-raised…
Radius
--alea-radius-xs…
Type
--alea-font-family-body…--alea-font-size-xs…--alea-font-weight-medium…
Shadow
--alea-shadow-pop…
Layer
--alea-z-tooltip…
Props
Tooltip props
Una pista corta con hover o foco de teclado, con un título y un atajo opcionales. No para nada que haya que leer para actuar.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
hideArrow | boolean | - | Oculta la flecha. |
motion | MotionProp | - | Cómo entra y sale: un preset (fade, scale, pop, rise, slide-up, blur...), false para ninguno, o { enter, exit, duration, easing, delay }. |
shortcut | ReactNode | - | Un atajo de teclado mostrado al final, como ⌘K. |
title | ReactNode | - | Una primera línea en negrita: un tooltip enriquecido con un título y una oración. Que no sea interactivo; para enlaces usa Toggletip. |
TooltipTrigger props
Envuelve un disparador que recibe foco y su Tooltip. Demora por defecto de 600 ms, 0 al pasar de un tooltip a otro.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
closeDelay | number | 200 | La demora para que el tooltip se cierre. (heredada) |
defaultOpen | boolean | - | Si el overlay está abierto por defecto (no controlado). (heredada) |
delay | number | 600 | La demora para que el tooltip aparezca. (heredada) |
isDisabled | boolean | - | Si el tooltip está deshabilitado, independientemente del disparador. (heredada) |
isOpen | boolean | - | Si el overlay está abierto (controlado). (heredada) |
onOpenChange | ((isOpen: boolean) => void) | - | Se llama cuando cambia el estado abierto del overlay. (heredada) |
trigger | "focus" | "hover" | - | Por defecto se abre con foco y con hover. Se puede hacer que se abra solo con foco. (heredada) |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Motion
- popAcepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-tooltip.alea-arrow.alea-tooltip-arrow.alea-tooltip-title.alea-tooltip-text.alea-tooltip-kbd- Atributos data
data-placement=bottomdata-placement=leftdata-placement=right
Accesibilidad
- También aparece con el foco del teclado, y se lee como descripción del disparador.
- Al pasar el mouse abre después de una pausa; entre tooltips es instantáneo.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Al enfocar el disparador aparece |
| Escape | Lo oculta |
Qué hacer y qué evitar
Hacer
- Usa pocas palabras.
Evitar
- No pongas enlaces ni botones en un tooltip.
- No escondas información que la gente necesita: las pantallas táctiles casi no muestran tooltips.