Tooltip
📘 Modo de Uso
O componente Tooltip é utilizado para exibir informações adicionais quando o usuário passa o mouse sobre um elemento ou foca nele.
Ele é ideal para fornecer dicas contextuais ou explicações breves que auxiliam na usabilidade sem ocupar espaço na interface.
Este componente é simples de usar, mas extremamente útil para melhorar a experiência do usuário ao fornecer informações contextuais de forma clara e acessível.
🧩 Anatomia
📋 Propriedades
⌨️ Código
opl.feedback.component.tooltip
🎨 Variantes
Estados
Tamanhos
Temas
📝 Observações
- A nomenclatura das posições possíveis do bico (beak) do Tooltip segue a lógica do mostrador de um relógio analógico, onde cada posição é representada por uma hora específica.
- Essa lógica ajuda a visualizar e definir a orientação do bico do Tooltip em relação ao elemento de referência, permitindo um ajuste preciso e intuitivo conforme a necessidade de design.
- Exemplo:
- 1:00 → o bico aponta para a posição equivalente a 1 hora no relógio.
- 2:00 → aponta para 2 horas, e assim por diante até 12:00.
📋 Uso do Template
Para compreender a árvore estrutural completa do componente Tooltip, acesse a página de Estrutura Hierárquica.
Para a utilização do template padrão, basta criar uma instância deste componente.
Informações Gerais
- O componente possui duas variações de tema:
- Light: Usada para contextos com background inverse (escuro).
- Dark: Usada para contextos com background default (claro).
- Além disso, ele possui variações de tamanho e posição.