Tooltip

Código

Copiar el marcado

<div class="luz-tooltip">
  <button class="luz-btn luz-btn--outline" type="button" aria-describedby="archive-tip">Archive</button>
  <div class="luz-tooltip__text" role="tooltip" id="archive-tip">Hides the project from the list</div>
</div>

Variantes y opciones

Una sola posición: encima del control y centrado. En navegadores compatibles con el posicionamiento de anclajes CSS, el tooltip se coloca debajo del control cuando no hay espacio encima.

No hay modificadores.

Cómo funciona

Solo CSS, desde components/tooltip.css: el tooltip se muestra mientras el puntero está sobre el contenedor o este tiene el foco.

• Permanece abierto mientras el puntero se mueve del control al tooltip.
• Aparece y desaparece gradualmente durante --luz-duration-fast, y se muestra de inmediato cuando se reduce el movimiento.
• El tooltip no admite saltos de línea: mantenlo breve o podría desbordarse en una pantalla estrecha.
• Mejora progresiva: en los navegadores compatibles con el posicionamiento de anclajes CSS (Chrome y Edge 125, Safari 26, Firefox 147: disponible recientemente, pero aún no de forma generalizada), el tooltip se ancla a su control (anchor-scope y los desplazamientos de anchor()) y cambia de lado para colocarse debajo si no hay espacio encima. Fuera de un contenedor de tamaño, deja de quedar recortado por un antecesor que oculte el desbordamiento; dentro de uno, como el contenedor de una tabla o un reproductor, se coloca y recorta según ese cuadro, como antes. En los demás navegadores permanece arriba, como antes: las reglas están dentro de @supports, sin script.

Sin JavaScript

No cambia nada: el tooltip no tiene script.

Teclado y ARIA

Enfoca el control con Tab para mostrar el tooltip; aparta el foco para ocultarlo.

• aria-describedby en el control apunta al tooltip, para que los lectores de pantalla lo lean después del nombre del control.
• El tooltip tiene role="tooltip" y nunca recibe el foco.
• El control conserva su propio nombre: el tooltip es una descripción, no una etiqueta.

Contraste y foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un tooltip para añadir una explicación breve a un control cuya etiqueta es clara, pero concisa.

Cuándo no usarlo

No incluyas en un tooltip nada esencial, largo o interactivo.

• Las pantallas táctiles no tienen efecto hover: pon en la página la información que se necesite, como indicación (campos de formulario).
• No uses nunca un tooltip como único nombre de un botón con icono.
• No incluyas enlaces ni botones.

Qué hacer y qué no

Cómo escribir el contenido

Una frase breve que explique qué hace el control o por qué: «Oculta el proyecto de la lista».

• No repitas la etiqueta del control.
• No pongas punto final a un fragmento.

Contraste y foco

El tooltip usa el texto principal sobre la superficie intensa, con borde y sombra.

Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. «Necesita» indica el mínimo AA de WCAG 2.2: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

• Foco: el tooltip se muestra cuando su control tiene el foco, no solo al pasar el puntero; el anillo es el propio del control.
• Bordes: el borde y la sombra lo separan de lo que hay debajo, también con colores forzados.

Tokens que usa

Los 11 tokens que lee components/tooltip.css, por familia. Cada familia enlaza a su página, con los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-divider, --luz-surface-strong, --luz-text-primary

Spacing and sizing

--luz-space-2xs, --luz-space-xs

Typography

--luz-font-sans, --luz-text-sm

Radius

--luz-radius-md

Shadows

--luz-shadow-md

Motion

--luz-duration-fast

Layers

--luz-z-raised

Teclado y ARIA están en la pestaña Código.