Ravox KitSobreposição
Dica
O texto curto que nomeia um botão só de ícone ou explica um controle. Abre no hover com atraso e na hora no foco pelo teclado, some no Esc, vira de lado quando falta espaço e é lida junto com o gatilho.
Ajustes
Lado
Exemplos
Botões só de ícone
Explicando um número
Taxa de conversão2,84%
Botão desabilitado
Os quatro lados
Instalação
O shadcn cria components/ui/dica.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/dica.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| conteudo | ReactNode | — | O texto da dica. Uma frase, sem link nem botão (para isso, use o Cartão flutuante). |
| children | ReactElement | — | O gatilho: um único elemento que recebe foco. Botão desabilitado não dispara eventos: embrulhe num <span tabIndex={0}>. |
| lado | "cima" | "baixo" | "esquerda" | "direita" | "cima" | De que lado a dica aparece. Vira para o oposto quando não cabe. |
| alinhamento | "inicio" | "centro" | "fim" | "centro" | Alinhamento com o gatilho, no outro eixo. |
| atalho | string | — | Atalho de teclado mostrado ao lado do texto (ex.: "⌘B"). |
| atraso | number | 500 | Espera antes de abrir no hover, em ms. No foco pelo teclado abre na hora. |
| vao | number | 6 | Distância do gatilho, em px. |
| aberto / aoMudar | boolean / (aberto) => void | — | Modo controlado. |
| desabilitada | boolean | false | Não mostra a dica (e tira o aria-describedby). |
| <ProvedorDica atraso janela> | number / number | 500 / 300 | Opcional, em volta de várias dicas: atraso comum e a janela em que a vizinha abre sem esperar depois que uma fecha. |