Componentes / Tooltips

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-tooltipClasse base (container, obrigatoria)
.canta-tooltip__triggerElemento que dispara o tooltip ao hover/focus
.canta-tooltip__contentConteudo do tooltip (texto, titulo, etc.)
.canta-tooltip__titleTitulo bold uppercase dentro do content
.canta-tooltip__descriptionTexto descritivo secundario
.canta-tooltip__shortcutContainer para teclas de atalho (kbd)
.canta-tooltip--topPosicao acima (padrao)
.canta-tooltip--top-startAcima alinhado a esquerda
.canta-tooltip--top-endAcima alinhado a direita
.canta-tooltip--bottomPosicao abaixo
.canta-tooltip--bottom-startAbaixo alinhado a esquerda
.canta-tooltip--bottom-endAbaixo alinhado a direita
.canta-tooltip--leftPosicao a esquerda
.canta-tooltip--left-startEsquerda alinhado ao topo
.canta-tooltip--left-endEsquerda alinhado embaixo
.canta-tooltip--rightPosicao a direita
.canta-tooltip--right-startDireita alinhado ao topo
.canta-tooltip--right-endDireita alinhado embaixo
.canta-tooltip--lightVariante clara (fundo branco)
.canta-tooltip--blueVariante azul CANTA
.canta-tooltip--magentaVariante magenta CANTA
.canta-tooltip--smTamanho pequeno (font-size xs)
.canta-tooltip--lgTamanho grande (font-size base)
.canta-tooltip--multilinePermite quebra de linha (max-width 280px)
.canta-tooltip--no-arrowRemove a seta do tooltip
.canta-tooltip--always-visibleTooltip sempre visivel
.canta-tooltip--animatedAnimacao de entrada (slide + fade)
.canta-tooltip--visibleForca exibicao via classe (sem hover)
.canta-tooltip--delay-shortDelay de 0.1s antes de exibir
.canta-tooltip--delay-mediumDelay de 0.3s antes de exibir
.canta-tooltip--delay-longDelay de 0.5s antes de exibir