Tooltip Dica
Introduction
O componente Tooltip é um elemento sobreposto de contexto que exibe texto descritivo complementar e não interativo quando o ponteiro paira ou foca o elemento de disparo.
Construído especificamente para nossa arquitetura de renderização estática Zero-JS e para o modelo de hidratação condicional, o Tooltip usa vinculações eficientes e amigáveis ao page builder, permitindo que os autores fixem dicas contextuais a qualquer elemento de UI sem atrito.
Usage
Estes exemplos ilustram como os autores de conteúdo configuram e vinculam blocos tooltip.
1. Tooltip base associado a um botão
Uma dica de hover clássica que explica a ação do botão, usando o posicionamento interativo padrão (topo central).
{
"type": "tooltip",
"triggerText": "Submit Report",
"content": "Sends your compiled analytics to the billing department."
}
2. Posicionamento multidirecional e tooltip desabilitado
O mesmo componente é reposicionado em várias direções (baixo, direita, esquerda) via propriedade placement para se adaptar a painéis estreitos. O terceiro mostra a variante disabled, que não exibe a dica quando a interação está desativada.
{
"type": "tooltip",
"triggerText": "Bottom Hint",
"content": "Appears below the trigger.",
"placement": "bottom",
"interactive": true
}
Props
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Texto do gatilho (triggerText) | string | "Hover me" | Rótulo visual impresso dentro do gatilho. |
Conteúdo do tooltip (content) | string | - | Texto descritivo complementar exibido ao passar o cursor. |
Posicionamento (placement) | select | "top" | Direção de ancoragem física relativa ao gatilho. • Opções: "top", "bottom", "left", "right", mais variantes -start/-end. |
Desabilitado (disabled) | boolean | false | Desativa totalmente a função de tooltip. |
Forçar interativo (interactive) | boolean | true | Hidrata a ilha do tooltip para vincular eventos de hover/foco. |
Atraso (ms) (delayMs) | number | 300 | Milissegundos que o tooltip aguarda antes de disparar. |
Architecture Notes
- Alinhamento inteligente de limites do viewport: A ilha interativa de Preact rastreia o espaço de tela dinamicamente. Se o tooltip abre perto de uma borda, inverte a direção automaticamente (ex. baixo para cima) e se desloca no seu eixo.
- Delegação unificada de eventos: Detecção de hover, exibição por foco e fechamento Escape são delegados centralmente a partir do contêiner, minimizando vinculações no cliente.
- Overlays semânticos: Os tooltips compilam em layouts nativos e acessíveis com
role="tooltip",aria-describedbye IDs de gatilho únicos por padrão.