Info label

Un label acompañado de un disparador de información que abre una nota contextual en un popover. Útil cuando un campo necesita una explicación que no cabe en el label ni en el placeholder.

Tasa de interés

Uso

Cuándo usar info label

  • El label por sí solo no alcanza para explicar el dato.
  • La explicación es contextual: no aplica a todos los usuarios ni todo el tiempo.
  • La información cabe en una a tres líneas; si es más larga, lleva a una página de ayuda.

Cuándo no usarlo

  • Si el dato es obligatorio entender para completar el formulario: ponlo como texto de ayuda visible.
  • Si la explicación cambia según el contexto del usuario: usa un mensaje inline, no un popover.

Variantes

Disparador

  • El disparador estándar es un icono de información circular de 16 px, alineado a la derecha del label.
  • Activable con clic, Enter o Espacio.
  • Cierra al perder foco, al hacer clic afuera o con Esc.

Accesibilidad

Etiquetado

  • El botón disparador necesita aria-label como Información o Más detalles.
  • El popover usa role=tooltip o aria-describedby conectado al control asociado.
  • El foco debe poder volver al disparador al cerrar el popover.

Contenido

El texto del popover

  • Una a tres líneas en sentence case.
  • Explica qué significa el dato y, si aplica, cómo se calcula.
  • Sin enlaces dentro del popover cuando el disparador se cierra al perder foco.