components
tooltip
Mensagem contextual ao hover/focus. CSS-only via atributo data-tooltip — sem JS necessário pra casos simples.
overview
variantes
Variante única.
comportamentos
- Aparece em hover OU focus (acessibilidade por teclado)
- Delay zero (sem espera frustrante)
- Posição default: acima do elemento
- z-index: var(--z-tooltip) garante topo
- CSS-only — funciona sem JS
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| data-tooltip | attr | — | texto do tooltip |
quando usar
use
não use
acessibilidade
- Funciona via focus do teclado
- aria-describedby idealmente (limitação do CSS-only puro)
- Não impede interação — só decora
- Pra a11y completo, usar versão JS com aria-describedby setado
código
<!-- CSS-only -->
<button class="btn btn--secondary" data-tooltip="atalho: ctrl+s">
salvar
</button>