Tooltip

El tooltip muestra información adicional al hacer hover o click. La información incluida debe ser aclaratoria, útil y no esencial.

Vista Previa

Figma

Usos

Cuándo usar

Cuando quieras proporcionar información adicional o contexto sobre un elemento de la interfaz de usuario sin interrumpir la tarea del usuario.

Para proporcionar una breve descripción o una explicación de un elemento de la interfaz de usuario, como un icono o un botón, o para mostrar una breve descripción de una opción de menú o una configuración.

Cuándo no usar

Evitar utilizar el componente tooltip de manera excesiva o molesta, ya que esto puede ser frustrante para el usuario y puede interrumpir la tarea que está realizando.

Comportamiento

Tipo

Description only

Ubicación

Visualización del componente tooltip posicionado arriba

Top

Visualización del componente tooltip posicionado arriba a la izquierda

Top left

Visualización del componente tooltip posicionado arriba a la derecha

Top right

Visualización del componente tooltip posicionado abajo

Bottom

Visualización del componente tooltip posicionado abajo a la izquierda

Bottom left

Visualización del componente tooltip posicionado abajo a la derecha

Bottom right

Visualización del componente tooltip posicionado a la derecha

Right

Visualización del componente tooltip posicionado a la izquierda

Left

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El elemento contenedor tiene por defecto role=”button” pero puede ser editado por el desarrollador.

el elemento tooltip cuenta con aria-describedby ligada a través de un id al elemento popover emergente.