Hover Target
Generated CSS
Um tooltip CSS mostra informações suplementares quando o usuário passa o mouse sobre ou foca em um elemento — sem necessidade de JavaScript. A abordagem padrão usa position: absolute em um pseudo-elemento ::before, oculto por padrão com opacity: 0; visibility: hidden e revelado em :hover e :focus-visible.
O desafio fundamental com a visibilidade do tooltip é que display: none não pode ser transicionado. A solução é usar opacity e visibility juntos. A opacidade transiciona de 0 para 1 suavemente. A visibilidade distingue entre oculto (não interativo) e visível, e aceita um atraso de transição.
O elemento de acionamento precisa de position: relative para que o tooltip absolutamente posicionado seja contido em seu sistema de coordenadas. Para um tooltip acima do acionador, bottom: calc(100% + 10px) o coloca 10px acima da borda superior. A centralização é tratada com left: 50%; transform: translateX(-50%).
Adicionar um pequeno deslizamento direcional ao aparecimento do tooltip o torna mais responsivo e polido. A técnica é dar ao tooltip um pequeno offset no estado oculto e transicioná-lo para a posição final no estado visível.
A implementação mais fácil de manter usa CSS para ler o conteúdo do tooltip diretamente de um atributo HTML via declaração content: attr(data-tooltip) no pseudo-elemento. Você define data-tooltip="Seu texto de dica" no elemento de acionamento no HTML.
Tooltips que aparecem instantaneamente ao passar o mouse podem ser irritantes. Adicionar um atraso de 300-500ms antes de mostrar previne que tooltips pisquem quando o cursor se move pela interface.
Um tooltip apenas de hover é inacessível para usuários de teclado. A correção é incluir :focus-visible junto com :hover em cada seletor que mostra o tooltip. Usuários de leitor de tela se beneficiam do texto do tooltip estar disponível como descrição acessível via aria-describedby.
O bug de tooltip mais comum é o tooltip ser recortado por um elemento pai com overflow: hidden. As soluções são: remover o overflow:hidden do ancestral se não for necessário, ou mover o tooltip para fora do ancestral problemático usando posicionamento JavaScript.
Tooltips são a escolha certa para texto suplementar curto que reafirma ou clarifica o que um elemento de interface faz. Não são a escolha certa para informações essenciais, conteúdo interativo ou explicações longas. Quando o conteúdo é mais rico do que uma única frase curta, um popover é o padrão apropriado.
display: none remove o elemento da árvore de renderização instantaneamente e não pode ser transicionado. opacity: 0 torna o elemento invisível mas o mantém no layout, e transiciona suavemente. visibility: hidden torna o elemento não interativo enquanto o mantém no layout.
Use content: attr(data-tooltip) no CSS do pseudo-elemento e adicione data-tooltip="Seu texto aqui" a cada elemento de acionamento no HTML.
Não de forma confiável. Dispositivos touch não têm estado hover. Para tooltips amigáveis ao touch, use uma abordagem de alternância ao toque com JavaScript, ou use o atributo nativo popover.
A correção mais limpa apenas em CSS é remover overflow: hidden do ancestral se não for necessário. Se o overflow é necessário para o layout, mova o tooltip para fora do limite de overflow usando JavaScript para posicioná-lo adicionando-o ao corpo do documento.
O elemento tooltip deve ter role="tooltip" e um id. O elemento de acionamento deve ter aria-describedby apontando para o id do tooltip.
Adicione um valor de transition-delay correspondente às transições de opacidade e visibilidade apenas na direção oculto para visível. Use 300-500ms para a direção de mostrar, e sem atraso para a direção de ocultar.