Tooltip

Proporcionan información adicional al pasar el ratón por encima de algunos elementos. La información debe ser contextual, útil y breve. Se pueden colocar en la parte superior, inferior, izquierda o derecha del elemento trigger. La alineación del texto dentro del contenedor será siempre central

Variaciones y tipos

Diferenciamos tres tipos: Text, Text + icon y Text + CTA. Utilizaremos uno u otro en función de la acción que requiera.

Text

Text + icon

Tooltip formado por un título, una descripción y un icono de cerrar.

Text + CTA

Tooltip que incluye un CTA.

Comportamiento

Los tooltip deben cumplir unos principios básicos en su comportamiento:

  • Transitorio
    Aparecen en los estados hover o focus y desaparecen después de un breve período de tiempo.
  • Emparejado
    Se ubican siempre cerca del elemento con el que se asocian.
  • Conciso
    Solo incluyen textos cortos y descriptivos.

Alineación y orden

Asegurarse de no solapar el tooltip con el elemento trigger para evitar ocultar una parte o la totalidad del contenido.