Tooltip (dica de contexto)

Pequena dica que aparece ao passar o cursor ou focar, dando informacao extra sem poluir a tela.

Hard

O que é

Tooltip e o elemento leve que mostra informacao extra quando a pessoa interage com um item, seja passando o cursor sobre um icone ou focando pelo teclado. Ele aparece so quando e preciso, e por isso da apoio sem encher a tela de explicacao fixa.

O tooltip serve bem pra informacao secundaria, como esclarecer um icone, uma sigla ou uma opcao avancada. Pra instrucao critica, porem, o texto inline e melhor, porque o tooltip pode acabar passando despercebido. Um icone de ajustes pode ganhar um Gerenciar preferencias no tooltip, enquanto um aviso importante precisa ficar visivel sem depender de nenhuma acao.

O gatilho do tooltip muda conforme o dispositivo. No desktop, ele aparece no hover; no touch, vem por toque longo ou foco, ja que ali nao existe cursor. E a acessibilidade pesa bastante: um tooltip que some rapido demais, que nao da pra alcancar pelo teclado ou que nao e lido pelo leitor de tela acaba excluindo gente.

Em uma frase

A gente poe um tooltip de Gerenciar preferencias no icone, mas a instrucao critica fica em texto visivel.

A pergunta que ele responde

Onde coloco a explicacao de um icone sem encher a tela de texto fixo?

Quando usar

Faz sentido pra esclarecer icone, sigla ou opcao avancada que nao se explica sozinha.

Como não usar

O cuidado e nao esconder instrucao critica dentro de um tooltip, e nao fazer ele sumir rapido demais nem deixar de permitir o acesso pelo teclado.

Na prática

Pense num icone sem rotulo la na barra que ganha um tooltip escrito Gerenciar preferencias, aparecendo quando a pessoa passa o cursor. O icone fica limpo, mas o significado continua acessivel.

Não confunda com

Vale lembrar que o tooltip nao serve pra instrucao critica, e sim pra informacao secundaria. Tudo que e essencial precisa ficar em texto visivel, justamente porque o tooltip pode passar batido. Ou seja, ele complementa, mas nao pode ser o unico lugar onde algo importante aparece.

D

Em inglês

Tooltips

Pronúncia

tul-tip

Também chamado de

tooltip, dica de contexto, dica de ferramenta

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre Tooltip Guidelines