Exibição

Tooltip

Dica curta que aparece no hover e no foco, só com o atributo data-tip.

só CSS

Exemplo

<button type="button" class="u-btn u-btn--secondary" data-tip="Copia o link público">Compartilhar</button>
<button type="button" class="u-btn u-btn--icon" data-tip="Adicionar" aria-label="Adicionar"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>

Instalação

Tooltip vem no pacote completo, em unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

Sem build É só CSS: com unslop.css na página, as classes já funcionam.

Classes e variantes

Classe	O que faz
`data-tip="texto"`	Em qualquer elemento: o texto aparece acima dele no hover e no foco de teclado.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
`aria-label`	no elemento	O `data-tip` é visual e o leitor de tela não lê. Repita o nome em `aria-label` ou no texto.

Teclado

Tecla	Faz
Tab	o foco visível mostra a dica