Tooltip

Tooltips são mensagens acionadas pelo usuário que fornecem informações adicionais sobre um elemento ou recurso da página. É uma pequena parte de uma informação contextual, que busca explicar para o usuário o propósito de outro componente da tela ao apontar ele com o mouse.

Como usar

Uma tooltip precisa ser acionada pelo usuário através de mouse hover ou foco do teclado (as duas opções devem estar disponíveis em todas as tooltips do sistema).

<p>Obama foi presidente dos <abbr class="tooltip" data-tooltip="Estados Unidos da América" title="Estados Unidos da América">EUA</abbr></p>

<p>Obama foi presidente dos <abbr class="tooltip" data-tooltip="Estados Unidos da América" data-tooltip-position="bottom" title="Estados Unidos da América">EUA</abbr></p>

<p>Obama foi presidente dos <abbr class="tooltip" data-tooltip="Estados Unidos da América" data-tooltip-position="left" title="Estados Unidos da América">EUA</abbr></p>

<p>Obama foi presidente dos <abbr class="tooltip" data-tooltip="Estados Unidos da América" data-tooltip-position="right" title="Estados Unidos da América">EUA</abbr></p>

<p>
  Plano
  <span class="icon tooltip" data-tooltip="Veja detalhes sobre o plano contrato" data-tooltip-position="right">
    <i class="fas fa-info-circle"></i>
  </span>
</p>

<!-- Conteúdo extenso -->
<button class="button is-text tooltip" data-tooltip="Integração é um recurso que permite utilizar os produtos da Zenvia junto a ferramentas de mercado, como Zendesk, RD Station e Google Calendar." data-tooltip-extended="true">Criar integração</button> 

Um Tooltip pode ser usado em qualquer elemento HTML, mas o seu principal uso é em:

• Ícones
• Labels com termos técnicos ou de difícil compreensão
• Links de texto
• Botões
• Imagens

Boas práticas

• Conteúdo breve, útil e esclarecedor.
• Seja conciso, use textos curtos com no máximo 3 linhas.
• Utilize tooltips para explicar ícones não rotulados.
• Não use para explicar informações vitais, como dica de preenchimento de senha. Essas informações devem estar sempre visíveis. Use tooltips apenas para informações adicionais.
• Não use em textos para explicar a mesma coisa.
• Não posicione a tooltip de modo que cubra outro conteúdo relevante.
• Não adicione elementos clicáveis ou interativos a uma tooltip.
• O componente deve possuir posição flexível e se adaptar de acordo com a proximidade com a borda da tela.

Acessibilidade

Quando um elemento que contem uma tooltip é destacado através do teclado, o foco deve se manter no elemento e a tooltip deve se tornar visível.

Ao aplicar, atente-se para não confundir o usuário. Não repita em uma tooltip o que já está dito em um label ou descrição. Observe se o componente no qual deseja utilizar a tooltip realmente a aceita.