Tooltip

Utilize o componente Tooltip para fornecer informações adicionais ou explicações sobre um elemento da interface ao passar o cursor sobre ele ou ao focá-lo. Este componente é essencial para melhorar a usabilidade, oferecendo esclarecimentos contextuais sem sobrecarregar a interface com informações extras.

Características Principais

Informação Contextual

Fornece detalhes ou instruções adicionais relacionados a um elemento específico da interface.

Economia de Espaço

Apresenta informações complementares apenas quando necessário, mantendo a interface limpa e focada.

Interação Simples

Ativado por hover ou foco, permite aos utilizadores acessar rapidamente as informações sem cliques adicionais.

Exemplo de Utilização

• Ícones de ajuda ou informação em formulários para explicar campos específicos.
• Descrições de funcionalidades ou opções em menus ou botões.
• Informações adicionais sobre dados em gráficos ou tabelas.

Incorpore o componente Tooltip sempre que precisar fornecer explicações ou detalhes adicionais de forma não intrusiva, melhorando a clareza e a compreensão dos utilizadores sobre a interface.

                                                    
<p>Hover <span class="gra-tooltip"><span class="tooltiptext topCenter">Lorem ipsum</span><b>aqui</b></span> alinhamento ao centro Top.</p>

<p>Hover <span class="gra-tooltip"><span class="tooltiptext topLeft">Lorem ipsum</span><b>aqui</b></span> alinhamento à esquerda Top.</p>

<p>Hover <span class="gra-tooltip"><span class="tooltiptext topRight">Lorem ipsum</span><b>aqui</b></span> alinhamento à direita Top.</p>

<p>Hover <span class="gra-tooltip"><span class="tooltiptext bottomCenter">Lorem ipsum</span><b>aqui</b></span> alinhamento ao centro Bottom.</p>

<p>Hover <span class="gra-tooltip"><span class="tooltiptext bottomLeft">Lorem ipsum</span><b>aqui</b></span> alinhamento à esquerda Bottom.</p>

<p>Hover <span class="gra-tooltip"><span class="tooltiptext bottomRight">Lorem ipsum</span><b>aqui</b></span> alinhamento à direita Bottom.</p>

<p>Hover <span class="gra-tooltip"><span class="tooltiptext left">Lorem ipsum</span><b>aqui</b></span> alinhamento à esquerda.</p>

<p>Hover <span class="gra-tooltip"><span class="tooltiptext right">Lorem ipsum</span><b>aqui</b></span> alinhamento à direita.</p>