Tooltip

Pronto

Hint contextual breve no hover/focus. Aparece após delay (300-500ms) e desaparece imediatamente ao tirar foco.

Usar quando

Explicar ícone-only button, expandir texto truncado, hint sobre regra de negócio, atalho de teclado.

Não usar quando

Texto longo (use Popover). Conteúdo interativo (use Popover). Mensagem crítica (use Alert ou Modal). Mobile-only (tooltips não funcionam em touch).

Variantes (passe o mouse)

Em ícone (caso #1 de uso)

Posições

Com atalho de teclado

Multi-linha (raro — prefira Popover)

Microinterações

Microinteração	Disparada por	Comportamento	Timing
Open delay	mouseenter	Espera 400ms antes de mostrar	`400ms delay`
Fade in	após delay	opacity 0→1 + translateY 4→0 (lado oposto)	`150ms ease`
Fade out	mouseleave	opacity 1→0 imediato	`100ms ease`
Skip delay	mouseenter outro elemento com tooltip dentro de 300ms	Próximo tooltip abre instantâneo	`instant`
Touch fallback	tap em mobile	Tooltip vira popover persistente até tap fora	`instant`

Acessibilidade

Acessibilidade — checklist

Teclado

`Tab`	Foco no trigger → tooltip aparece
`Esc`	Fecha tooltip

ARIA esperado

role="tooltip" no popup
aria-describedby="tip-id" no trigger
Trigger: aria-label sempre presente (caso tooltip falhe)

Notas

Tooltip aparece em hover E focus (a11y).
NÃO use tooltip como única explicação — sempre tenha aria-label adequado.
Em mobile, considere mostrar texto inline (tooltips não funcionam em touch).
Texto curto (~80 chars). Multi-linha excepcional.

Código

'use client';
import { useState } from 'react';
import { T, RADIUS } from '@/lib/tokens';

export function Tooltip({ children, text, position = 'top' }) {
  const [open, setOpen] = useState(false);
  return (
    <span style={{ position: 'relative', display: 'inline-block' }}
      onMouseEnter={() => setTimeout(() => setOpen(true), 400)}
      onMouseLeave={() => setOpen(false)}>
      {children}
      {open && (
        <span role="tooltip" style={{
          position: 'absolute', [position]: '100%',
          background: T.ink, color: T.surface,
          padding: '6px 10px', borderRadius: RADIUS.sm,
          fontSize: 11, whiteSpace: 'nowrap',
        }}>{text}</span>
      )}
    </span>
  );
}

Regras

Faça

✓Background T.ink (preto), texto T.surface (branco) — alto contraste.
✓Delay 400ms antes de aparecer (evita ruído).
✓Sumir imediatamente ao tirar mouse.
✓Texto curto (~80 chars). Multi-linha raro.
✓Setinha apontando ao trigger (pseudo-elemento ou SVG).

Não faça

✗Não use tooltip como única forma de descobrir feature.
✗Não use tooltip em mobile (touch não tem hover).
✗Não use tooltip pra conteúdo interativo (use Popover).
✗Não force tooltip sobre tooltip (escape).
✗Não tenha tooltip persistente (use Alert ou inline).

Tokens usados

Token	Valor	Papel
`T.ink`	`#0A0A0A`	background
`T.surface`	`#FFFFFF`	cor do texto
`T.shadowMd`	`0 4px 14px ...`	sombra
`RADIUS.sm`	`6`	borderRadius