Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Tooltip
Tooltip
El tooltip muestra información adicional al hacer hover o click. La información incluida debe ser aclaratoria, útil y no esencial.
Usos
Como 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.
Como 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
Top
Top left
Top right
Bottom
Bottom left
Bottom right
Right
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.
El elemento popover emergente tiene role="tooltip".
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
