SWCore / Componentes / Tooltip

Tooltip Componentes

Dica flutuante inteligente via JS com posicionamento automático nas bordas, cores semânticas e suporte a seguir o cursor. Suporta sintaxe curta sw-tool.

O que é

Dica de apoio contextual e acessível que surge ao passar o mouse ou focar um elemento. Mais inteligente que tooltips apenas em CSS, pois reposiciona evitando corte na tela e pode acompanhar o cursor do mouse.

Como funciona

O texto vem do atributo sw-tool (ou sw-tooltip). Um único elemento .sw-tooltip reutilizável é injetado no DOM e posicionado dinamicamente com coordenadas calculadas e animação suave.

Exemplos

01 · Posições & Seguir Cursor (Follow) Ao vivo

<button class="sw-btn sw-btn-out" sw-tool="Dica no Topo">Top</button>
<button class="sw-btn sw-btn-out" sw-tool="Dica Embaixo" sw-tool-pos="bottom">Bottom</button>
<button class="sw-btn sw-btn-out" sw-tool="Dica à Esquerda" sw-tool-pos="left">Left</button>
<button class="sw-btn sw-btn-out" sw-tool="Dica à Direita" sw-tool-pos="right">Right</button>
<button class="sw-btn sw-btn-pri" sw-tool="Eu sigo o mouse" sw-tool-follow="true">Follow Cursor</button>

02 · Cores Semânticas (sw-tool-clr) Ao vivo

<button class="sw-btn sw-btn-out" sw-tool="Dica Padrão">Padrão</button>
<button class="sw-btn sw-btn-pri" sw-tool="Cor Primária" sw-tool-clr="pri">Primária</button>
<button class="sw-btn sw-btn-sec" sw-tool="Cor Secundária" sw-tool-clr="sec">Secundária</button>
<button class="sw-btn sw-btn-suc" sw-tool="Tudo certo!" sw-tool-clr="suc">Sucesso</button>
<button class="sw-btn sw-btn-war" sw-tool="Atenção!" sw-tool-clr="war">Aviso</button>
<button class="sw-btn sw-btn-err" sw-tool="Ocorreu uma falha" sw-tool-clr="err">Erro</button>
<button class="sw-btn sw-btn-inf" sw-tool="Dica informativa" sw-tool-clr="inf">Info</button>

03 · Modelo Dia / Noite Travado (sw-tool-thm) Ao vivo

<button class="sw-btn sw-btn-out" sw-tool="Acompanha tema">Padrão</button>
<button class="sw-btn sw-btn-out" sw-tool="Sempre clara" sw-tool-thm="dia">Sempre Dia</button>
<button class="sw-btn sw-btn-out" sw-tool="Sempre escura" sw-tool-thm="noite">Sempre Noite</button>

04 · Atraso (Delay) & Conteúdo Rico em HTML Ao vivo

<button class="sw-btn sw-btn-out" sw-tool="Aparece na hora" sw-tool-delay="0">Sem Atraso</button>
<button class="sw-btn sw-btn-out" sw-tool="Espera 1 segundo" sw-tool-delay="1000">1s Atraso</button>
<button class="sw-btn sw-btn-out" sw-tool="<b>Negrito</b> e <i>itálico</i>" sw-tool-html="true">Com HTML</button>

Atributos

sw-tool="texto" / sw-tooltip="texto"

texto mostrado na dica (ativa o componente)

sw-tool-pos / sw-tooltip-pos

"top" (padrão), "bottom", "left", "right" (ou "topo", "baixo", "esquerda", "direita")

sw-tool-clr / sw-tooltip-clr

variante de cor semântica: "pri", "sec", "suc", "war", "err", "inf", "night", "light"

sw-tool-thm / sw-tooltip-thm

"dia" (força clara) ou "noite" (força escura), independente do tema geral do site

sw-tool-delay / sw-tooltip-delay

tempo de espera em milissegundos antes de exibir (padrão 150ms, use "0" para instantâneo)

sw-tool-html="true" / sw-tooltip-html="true"

interpreta o texto como HTML para formatação avançada

sw-tool-follow="true" / sw-tooltip-follow="true"

a dica acompanha o movimento do cursor do mouse em tempo real

Variantes

is-top / is-bottom / is-left / is-right

direção da setinha indicadora

is-pri / is-sec / is-suc / is-war / is-err / is-inf

cores semânticas

is-lgt / is-drk

força modelo claro ou escuro

is-follow

desativa a setinha quando está seguindo o cursor

Eventos

Nenhum.

API (JavaScript)

SW.Tool.create(el, opts) ou SW.Tooltip.create(el, opts)

cria ou vincula uma dica programaticamente

SW.Tool.update(el, text) ou SW.Tooltip.update(el, text)

atualiza o texto da dica em tempo de execução

SW.Tool.destroy(el) ou SW.Tooltip.destroy(el)

remove a dica do elemento

Requisitos

Nenhuma.

Limitações — o que ele não faz

Com sw-tool-html="true", o texto é injetado como HTML sem sanitização — utilize apenas com conteúdo confiável escrito na sua aplicação.

← AnteriorTabs Próximo →Panel