Tooltips
Tooltips brutalistas com seta, sombra geometrica e 12 posicoes. Suporte a variantes de cor, tamanhos, multiline e animacoes.
Tooltip Basico
Preview (passe o mouse)
Tooltip padrao (top)
HTML
<div class="canta-tooltip canta-tooltip--top">
<span class="canta-tooltip__trigger">
<button class="canta-btn canta-btn--outline">Hover me</button>
</span>
<div class="canta-tooltip__content">Tooltip padrao (top)</div>
</div>Posicoes
Top / Right / Bottom / Left
Top
Right
Bottom
Left
HTML
<div class="canta-tooltip canta-tooltip--top">...</div>
<div class="canta-tooltip canta-tooltip--right">...</div>
<div class="canta-tooltip canta-tooltip--bottom">...</div>
<div class="canta-tooltip canta-tooltip--left">...</div>
<!-- Sub-posicoes tambem disponiveis: -->
<div class="canta-tooltip canta-tooltip--top-start">...</div>
<div class="canta-tooltip canta-tooltip--top-end">...</div>
<div class="canta-tooltip canta-tooltip--bottom-start">...</div>
<div class="canta-tooltip canta-tooltip--bottom-end">...</div>
<div class="canta-tooltip canta-tooltip--left-start">...</div>
<div class="canta-tooltip canta-tooltip--left-end">...</div>
<div class="canta-tooltip canta-tooltip--right-start">...</div>
<div class="canta-tooltip canta-tooltip--right-end">...</div>Variantes de Cor
Default / Light / Blue / Magenta
Default (preto)
Light (branco)
Blue
Magenta
HTML
<div class="canta-tooltip canta-tooltip--top">...</div>
<div class="canta-tooltip canta-tooltip--top canta-tooltip--light">...</div>
<div class="canta-tooltip canta-tooltip--top canta-tooltip--blue">...</div>
<div class="canta-tooltip canta-tooltip--top canta-tooltip--magenta">...</div>Tamanhos
Small / Default / Large
Tooltip sm
Tooltip default
Tooltip lg
HTML
<div class="canta-tooltip canta-tooltip--top canta-tooltip--sm">...</div>
<div class="canta-tooltip canta-tooltip--top">...</div>
<div class="canta-tooltip canta-tooltip--top canta-tooltip--lg">...</div>Conteudo Rico
Titulo + descricao / Multiline / Atalho
Configuracoes
Gerencie suas preferencias de conta e notificacoes
Salvar
CtrlS
HTML
<!-- Titulo + descricao -->
<div class="canta-tooltip canta-tooltip--top canta-tooltip--multiline">
<span class="canta-tooltip__trigger">...</span>
<div class="canta-tooltip__content">
<span class="canta-tooltip__title">Configuracoes</span>
<span class="canta-tooltip__description">Descricao aqui</span>
</div>
</div>
<!-- Com atalho de teclado -->
<div class="canta-tooltip canta-tooltip--top">
<span class="canta-tooltip__trigger">...</span>
<div class="canta-tooltip__content">
Salvar
<span class="canta-tooltip__shortcut"><kbd>Ctrl</kbd><kbd>S</kbd></span>
</div>
</div>Modificadores
Sem seta / Sempre visivel / Animado
Sem seta
Sempre visivel
Com animacao
HTML
<div class="canta-tooltip canta-tooltip--top canta-tooltip--no-arrow">...</div>
<div class="canta-tooltip canta-tooltip--top canta-tooltip--always-visible">...</div>
<div class="canta-tooltip canta-tooltip--top canta-tooltip--animated">...</div>API
| Classe | Descricao |
|---|---|
.canta-tooltip | Classe base (container, obrigatoria) |
.canta-tooltip__trigger | Elemento que dispara o tooltip ao hover/focus |
.canta-tooltip__content | Conteudo do tooltip (texto, titulo, etc.) |
.canta-tooltip__title | Titulo bold uppercase dentro do content |
.canta-tooltip__description | Texto descritivo secundario |
.canta-tooltip__shortcut | Container para teclas de atalho (kbd) |
.canta-tooltip--top | Posicao acima (padrao) |
.canta-tooltip--top-start | Acima alinhado a esquerda |
.canta-tooltip--top-end | Acima alinhado a direita |
.canta-tooltip--bottom | Posicao abaixo |
.canta-tooltip--bottom-start | Abaixo alinhado a esquerda |
.canta-tooltip--bottom-end | Abaixo alinhado a direita |
.canta-tooltip--left | Posicao a esquerda |
.canta-tooltip--left-start | Esquerda alinhado ao topo |
.canta-tooltip--left-end | Esquerda alinhado embaixo |
.canta-tooltip--right | Posicao a direita |
.canta-tooltip--right-start | Direita alinhado ao topo |
.canta-tooltip--right-end | Direita alinhado embaixo |
.canta-tooltip--light | Variante clara (fundo branco) |
.canta-tooltip--blue | Variante azul CANTA |
.canta-tooltip--magenta | Variante magenta CANTA |
.canta-tooltip--sm | Tamanho pequeno (font-size xs) |
.canta-tooltip--lg | Tamanho grande (font-size base) |
.canta-tooltip--multiline | Permite quebra de linha (max-width 280px) |
.canta-tooltip--no-arrow | Remove a seta do tooltip |
.canta-tooltip--always-visible | Tooltip sempre visivel |
.canta-tooltip--animated | Animacao de entrada (slide + fade) |
.canta-tooltip--visible | Forca exibicao via classe (sem hover) |
.canta-tooltip--delay-short | Delay de 0.1s antes de exibir |
.canta-tooltip--delay-medium | Delay de 0.3s antes de exibir |
.canta-tooltip--delay-long | Delay de 0.5s antes de exibir |