Skip to main content

Tooltip

Visão geral#

O componente tooltip tem a função de apresentar ajuda contextual ou informação adicional sobre um elemento em tela.

Anatomia#

Estruturalmente, o tooltip é composto por:

Tooltip com as 3 partes sinalizadas: label, background e arrow

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.

A nomenclatura adotada se baseia na posição do tooltip em relação ao elemento ancorado.

Tooltip bottom posicionado abaixo de um icone; Top, acima do icone; top-right e top left, acima do icone, variando o alinhamento.

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.
Edit this page