Tooltip Componentes

O que é

Sabe quando você passa o mouse num ícone e aparece um balão dizendo o que ele faz? É o tooltip. Você escreve o texto dentro do atributo sw-tooltip de qualquer elemento — botão, ícone, link, palavra — e pronto. Com outros atributos você escolhe o lado em que o balão abre, a cor, a demora para aparecer, se ele segue o mouse e se aceita negrito e quebra de linha.

O JavaScript do núcleo usa um único balão para a página toda e o posiciona perto do elemento quando o mouse entra (ou quando o elemento recebe foco pelo Tab). Se não couber do lado pedido (perto da borda da tela), ele abre do lado oposto sozinho. Sem cor escolhida, o balão acompanha o tema: escuro no tema claro, claro no tema escuro. Ele lê o texto na hora de aparecer, então se você trocar o valor de sw-tooltip por JavaScript, o balão já mostra o novo.

Quando usar

• Botões só com ícone (editar, excluir, copiar): o balão diz o que o ícone faz.
• Explicar um termo num formulário ou tabela: "CNPJ", "Frete grátis acima de R$ 199".
• Mostrar o valor completo de algo cortado com reticências.
• Não use para informação essencial: no celular não existe "passar o mouse". Coloque o que é importante no texto da página.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O tooltip precisa dos dois.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Coloque o texto em sw-tooltip. Passe o mouse no botão.

   Frete

   <button type="button" sw-btn="out" sw-tooltip="Enviamos para todo o Brasil">Frete</button>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<button type="button" sw-btn="ghost rnd" sw-tooltip="Editar pedido" aria-label="Editar pedido"><i class="swi-edit"></i></button>
<button type="button" sw-btn="ghost rnd" sw-tooltip="Enviar por WhatsApp" aria-label="Enviar por WhatsApp"><i class="swil-whatsapp"></i></button>
<button type="button" sw-btn="ghost err rnd" sw-tooltip="Cancelar pedido" sw-tooltip-clr="err" aria-label="Cancelar pedido"><i class="swi-trash"></i></button>

<div sw-fld>
  <label for="pix">
    Chave Pix
    <i class="swi-info-circle" tabindex="0" sw-tooltip="Pode ser CPF, e-mail, telefone ou chave aleatória" sw-tooltip-pos="rgt"></i>
  </label>
  <input sw-inp id="pix" name="pix">
</div>

<button type="button" sw-btn="out" id="cupom" sw-tooltip="Copiar cupom" sw-tooltip-delay="1">VOLTA10</button>

<script>
  const cupom = document.getElementById('cupom');
  cupom.addEventListener('click', () => {
    navigator.clipboard.writeText('VOLTA10');
    cupom.setAttribute('sw-tooltip', 'Copiado!');       // o balão lê o texto novo
    setTimeout(() => cupom.setAttribute('sw-tooltip', 'Copiar cupom'), 1500);
  });
</script>

const icone = document.querySelector('#status');
SW.Tooltip.create(icone, { text: 'Loja aberta', pos: 'bot', color: 'suc', delay: 100 });

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js.
• swcore.compl.min.css — só se usar ícones swi-*.

Cuidados — erros comuns

• Usar title="…" junto com sw-tooltip: aparecem dois balões (o do navegador e o do SWCore). Use só sw-tooltip.
• Botão só com ícone: o tooltip ajuda quem vê, mas quem usa leitor de tela precisa de aria-label também.
• Com sw-tooltip-html="true", nunca coloque texto digitado por visitantes (nome, comentário): o HTML é mostrado como está. Use HTML só em texto seu.
• Tooltip em <button disabled> não aparece (botão desativado não recebe o mouse). Envolva o botão num <span sw-tooltip>.
• Texto comprido: o balão tem no máximo 240 px de largura e quebra linha. Para textos longos, use um Popover.

O que ele não faz

• Só aparece com mouse ou foco de teclado — em toque de celular não é garantido.
• Um balão por vez na página (o último que recebeu o mouse).
• Não tem clique para fixar aberto, nem botão de fechar.