Sistema de diseño
Tooltip
El tooltip es un componente emergente que proporciona información contextual de manera concisa cuando el usuario interactúa con un elemento.
Figma
Storybook
AEM
Overview
El tooltip es un componente emergente que ofrece información contextual breve y clara. Aparece cuando el usuario pasa el cursor sobre un elemento o lo selecciona, proporcionando detalles adicionales. Su diseño está optimizado para asegurar que la información sea fácilmente accesible y relevante, sin interrumpir ni saturar la interfaz principal.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
El tooltip está disponible en dos tamaños:
- Large: Proporciona un tamaño mayor para mostrar más contenido o información detallada.
- Small: Ofrece un tamaño reducido, ideal para presentar información breve y directa.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Dentro de la configuración de este componente encontramos varias opciones:
Title + icon
Opción disponible únicamente en la variante large. Incorpora un título y un ícono para proporcionar información más detallada.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
En la variante large del tooltip, se implementan los siguientes comportamientos:
Max width
Se recomienda que el tooltip no supere los 343px de ancho.
Default
El tooltip se expande horizontalmente en función del texto. Al alcanzar el ancho máximo, el componente se ajusta para crecer verticalmente.
Title + icon
El tooltip con título tiene un ancho definido por defecto. Cuando el texto alcanza el límite de este ancho, el componente crece verticalmente.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes