Web ResponsiveComponents
Tooltips

Tooltips

Los tooltips son herramientas de ayuda visual que muestran información adicional al usuario acerca del elemento gráfico sobre el que tenga situado el cursor en ese momento. Los tooltips puedes tener más o menos información, incluso pueden contener otros componentes como iconos y listas. En cualquier caso recuerda que no debes abusar de la cantidad de información que muestres en el tooltip.

Default tooltip

Por defecto el tooltip debe ser blanco con el texto en negro y debe respetar unos márgenes para el contenido de 20dp. Los márgenes que debes respetar entre los párrafos son los mismos que están definidos para el resto de tipografía.

Tooltip por defecto con los márgenes de contenido aplicados.

Tipologías

Puedes usar dos tipos diferentes de tooltips basados en la interacción que le propongas al usuario. Como normal general el tooltip se muestra al hacer foco sobre un elemento gráfico, como por ejemplo un icono, y desaparece al cambiar el foco.

También puedes usar tooltips que requieran de una acción del usuario para cerrarlos añadiendo un icono en forma de aspa en la parte superior derecha. En este tipo de tooltips puedes añadir también links e incluso botones que enlacen a otras partes del site o desencadenen acciones.

Tooltips que requieren de la acción del usuario para cerrarlos.

Avisos

También puedes aplicar diferentes estilos al tooltip en función al uso que le quieras dar. Limita estos cambios al color de fondo, que puede ser negro (Dark Silk) o azul (Day Blue) con el texto en blanco.

Cuando uses estos estilos procura que el mensaje no sea excesivamente largo. Recuerda que es más difícil leer grandes cantidades de texto cuando se pintan de color blanco.

Aplica diferentes estilos a los toasts para adaptarlos mejor a tus necesidades.