Tooltip
- Uso
- Desenvolvimento
- Customização
#
Visão geralO componente tooltip
tem a função de apresentar ajuda contextual ou informação adicional sobre um elemento em tela.
#
AnatomiaEstruturalmente, o tooltip é composto por:
![Tooltip com as 3 partes sinalizadas: label, background e arrow](/assets/images/tooltip-anatomy-30bf54031883edf70a93c33a73dc3427.png)
1. Label
2. Background
3. Arrow
#
Variações (Posicionamento)O componente tooltip possui doze variações de posicionamento, sendo que o posicionamento padrão é o bottom.
![As 12 variações do componente Tooltip: bottom, bottom-left, bottom-right, right, right-top, top-left, top, top-right, left-top, left, left-bottom, bottom-right.](/assets/images/tooltip-position-1666879e2c96340a1c275d583dcb4dc5.png)
A nomenclatura adotada se baseia na posição do tooltip em relação ao elemento ancorado.
#
Boas práticas#
Faça- Mantenha as informações tão concisas e claras quanto possível;
- Ajude as pessoas usuárias a entender o significado ou propósito do elementos em tela;
- Forneça informações adicionais para a conclusão de uma tarefa.
#
Não faça- Informações importantes ou cruciais não devem estar dentro do tooltip;
- Não utilize o tootltip para passar uma mensagem de erro;
- Não obstrua informações importantes;
- Não coloque ações dentro de uma tooltip.