Acción Tooltip
Una tooltip que aparece cuando el usuario pasa el cursor sobre un botón. Típicamente, incluye una explicación o información adicional sobre la acción que se realizará al hacer clic en el botón. A menudo se utiliza para botones con un solo icono, proporcionando a los usuarios una comprensión clara de la acción asociada.
Estructura
- Título es el elemento más importante y requerido de la tooltip; describe la función principal del botón. Recomendamos formular el texto del título de manera que quepa en una sola línea.
- Descripción — un elemento opcional de la tooltip que proporciona información adicional sobre el título.
- Atajos de teclado / Combinación de teclas - un elemento opcional de la tooltip, una combinación de teclas que, al presionarse, inicia la acción descrita en la interfaz. Se utiliza para enseñar a los usuarios acciones rápidas para acelerar su interacción con el servicio.
Opciones
- Solo título es la opción más utilizada; la tooltip describe brevemente solo la acción en sí. Recomendamos formular el texto de manera que contenga no más de 5 palabras.
- Título y atajo de teclado - Si una acción tiene asignada una combinación de teclas, se recomienda mostrarla para guiar al usuario.
- Título y descripción - Si la acción es compleja y el título no se puede formular de manera concisa y clara, se recomienda incluir una descripción con información adicional.
- Título, descripción y atajo de teclado - el conjunto máximo para un componente, utilizado cuando todos los elementos son necesarios para que el usuario tome una decisión en la interfaz.
Tamaños
Cuando se utiliza un título solo o título + atajo de teclado, el ancho de la tooltip se ajusta al texto. Para las descripciones, el ancho se establece en 300px.
Relleno en todas las opciones: 12px a izquierda y derecha, 8px arriba y abajo.
En la opción con atajos de teclado, el espacio entre el título y la etiqueta se establece en 8px.
En la opción con descripción (independientemente de si hay o no atajos de teclado), la distancia entre el título y la descripción es de 2px.
Posición
La posición principal de la tooltip en relación con el botón es abajo y centrada, con una distancia de 4px entre los elementos.
Si los botones están posicionados en el borde izquierdo o derecho de la página, la tooltip se alinea con el borde correspondiente del botón.
Si los botones están en la parte inferior de la pantalla, la tooltip se muestra en la parte superior en la posición que corresponde a la ubicación del botón: borde izquierdo, centro o borde derecho.
Tiempos
Dependiendo de su propósito, puede ajustar el retraso para que la tooltip aparezca y desaparezca al pasar el cursor sobre ella. En la mayoría de los casos, la tooltip aparece instantáneamente o con un retraso mínimo de hasta 250 ms y desaparece cuando el usuario aleja el cursor del botón.
Si cree que la mayoría de los usuarios comprenderán la función del botón sin una pista, la tooltip se puede mostrar solo a aquellos que tienen dificultades, y el retraso de aparición se puede aumentar para evitar molestar a los usuarios con elementos innecesarios.
Casos de uso
