Todos los componentes (204)

Tooltip

Capas · Tooltip · .amset-tooltip

Qué es y cuándo usarlo

Ayuda contextual: una frase corta junto a un botón o un enlace. Aparece al pasar el ratón y al llegar con el teclado, que es la mitad que suele faltar.

Cuándo usarlo

Aclarar lo que hace un botón de icono o una acción poco evidente: «Copia el NIF al portapapeles».
disabled cuando el texto ya se ve entero y el tooltip sobra: devuelve el elemento tal cual, sin envoltorio.
En pantallas táctiles, donde no hay ratón que pase por encima, suma 'press' a openOn: se abre y se cierra al pulsar el elemento, y se cierra al pulsar fuera.

Cuándo no

Información imprescindible: va en la hint del campo o en el texto, no escondida tras un icono.
Más de una frase, o algo que hay que pulsar dentro: Dropdown.
Nombrar un botón de icono: eso lo hace su aria-label (IconButton lo obliga); el tooltip solo lo describe.

Teclado: al llegar con Tab al elemento sale al momento, sin esperar el delay; se va al salir el foco, y Escape lo cierra sin mover el foco.

Accesibilidad: se anuncia como tooltip y queda como descripción del elemento que lo dispara, no como su nombre. trigger tiene que ser enfocable (un botón, un enlace): si no, con el teclado no sale nunca. La flecha es adorno.

Aspecto fino: variables CSS --amset-tooltip-*: -background, -ink, -width (14, 16 o 20 rem según el tamaño), -padding-block, -padding-line, -font y -radius. Se pinta en la capa superior del navegador como un popover manual, que no cierra lo que haya abierto al lado: dentro de un diálogo se sigue viendo.

Cómo se ve

<Tooltip trigger={<Button variant="outline">Exportar</Button>}>Se exporta en CSV</Tooltip>

Props

Se importa con import { Tooltip } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	El texto de ayuda. Corto: si necesita un parrafo, no es un tooltip.
`trigger`obligatoria	`ReactElement<{ readonly onClick?: (event: MouseEvent<HTMLElement>) => void; }>`	Elemento que lo dispara. Tiene que ser enfocable (un boton, un enlace).
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`closeDelay`	`number`	Milisegundos de gracia al salir: evita el parpadeo al pasar de largo.
`defaultOpen`	`boolean`	Abierto al montar, sin controlarlo desde fuera.
`delay`	`number`	Milisegundos antes de aparecer al pasar el raton. Con el foco sale al momento.
`disabled`	`boolean`	Apagado: útil cuando el texto ya se ve entero y el tooltip sobra.
`offset`	`number`	Separación en píxeles respecto al elemento.
`onOpenChange`	`(open: boolean) => void`	Avisa de cada intento de abrir o cerrar, venga del raton, del foco o de Escape.
`open`	`boolean`	Abierto o cerrado, mandado desde FUERA. El raton y el foco siguen avisando por `onOpenChange`, pero ya no deciden: decide quien lo pasa. Es para enseñar la ayuda sin que nadie la pida -el paso de una visita guiada, un aviso tras un error- y para fotografiarla en el banco.
`openOn`	`readonly TooltipOpenOn[]`	Que la abre. Por defecto `['hover', 'focus']`, que en una pantalla tactil no se ve nunca: ahi hace falta `'press'`, que la alterna al pulsar y la cierra al pulsar fuera. Si se pone `'press'` SIN `'focus'`, el teclado no la abre, asi que normalmente se suma a los otros dos y no los sustituye.
`side`	`TooltipSide`	—
`size`	`"sm" \| "md" \| "lg"`	El cuerpo de la letra y el ancho máximo: 14, 16 o 20 rem.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-tooltip-background`	`var(--amset-ink)`
`--amset-tooltip-ink`	`var(--amset-surface)`
`--amset-tooltip-width`	`16rem`
`--amset-tooltip-padding-block`	`var(--amset-space-2)`
`--amset-tooltip-padding-line`	`var(--amset-space-3)`
`--amset-tooltip-font`	`var(--amset-text-sm)`
`--amset-tooltip-radius`	`var(--amset-radius)`

Cómo se cambia

.amset-tooltip {
  --amset-tooltip-background: ...;
  --amset-tooltip-ink: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: