Gerador de Balão de Fala/Tooltip CSS
Gere uma forma de balão de bate-papo / balão de fala / dica de ferramenta — uma caixa arredondada com cauda posicionável, usando a técnica clássica de border-triangle (::after/::before), não clip-path. Defina cor, raio, preenchimento, contorno opcional e posição/deslocamento/tamanho da cauda, com visualização ao vivo e CSS + HTML prontos para colar.
Entrada
Conteúdo de amostra mostrado na visualização e copiado para o trecho HTML.
As regras geradas são limitadas a esta classe, para que não colidam com seus próprios estilos.
Cores
Forma
Também descreve a cauda — adiciona um segundo elemento pseudo maior (::before) atrás dele.
Cauda
Que borda do balão a cauda aponta.
Posição ao longo dessa borda — 0 = início, 50 = centro, 100 = fim.
Saída
Seu balão de fala aparecerá aqui.
O balão realmente gerado, isolado em um Shadow DOM.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-speech-bubble-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"bubbleText": "Hey! Got a sec to chat? 💬",
"className": "bubble",
"backgroundColor": "#4f46e5",
"textColor": "#ffffff",
"borderRadius": "16",
"paddingX": "18",
"paddingY": "12",
"showBorder": "",
"borderColor": "#312e81",
"borderWidth": "2",
"tailPosition": "bottom",
"tailOffset": "50",
"tailSize": "14"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-speech-bubble-generator` tool (CSS Speech Bubble / Tooltip Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-speech-bubble-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Balão de Fala/Tooltip CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
O Gerador de Balão de Fala/Tooltip CSS constrói uma forma de balão de bate-papo, legenda ou dica de ferramenta arredondada com cauda pontiaguda, usando apenas um pseudo-elemento ::after (e, quando uma borda está ativa, ::before) em um <div>. Sem clip-path, sem imagem e sem JavaScript — a cauda é o truque clássico de border-triangle: uma caixa de tamanho zero com três lados de borda transparentes e o quarto colorido entra em colapso em um triângulo sólido.
Defina a cor de fundo, o raio do canto, o preenchimento e um contorno opcional, depois escolha qual borda a cauda aponta, a que distância ao longo dessa borda fica, e o tamanho dela. Você obtém uma visualização ao vivo (renderizada a partir da marcação realmente gerada, isolada em um Shadow DOM para que os pseudo-elementos apareçam realmente) mais CSS e HTML prontos para copiar.
Como usá-lo
- Digite o Texto do balão que deseja visualizar e dê ao bloco um Nome de classe para que não colida com seus próprios estilos.
- Escolha as cores de Fundo e Texto.
- Ajuste o Raio da borda e o Preenchimento esquerdo/direito e topo/fundo.
- Ative Adicionar uma borda se quiser um balão com contorno — isso também descreve a cauda usando um segundo pseudo-elemento maior atrás dele.
- Em Cauda, escolha qual Borda a cauda aponta, seu Deslocamento ao longo dessa borda (0 = início, 50 = centro, 100 = fim), e seu Tamanho.
- Copie o HTML para sua marcação e o CSS para sua folha de estilos.
Por que a borda precisa de um segundo pseudo-elemento?
Uma borda CSS não consegue seguir as arestas diagonais de um triângulo, então o contorno na cauda é falsificado: ::before desenha um triângulo ligeiramente maior na cor da borda, e ::after desenha o triângulo do tamanho real na cor de fundo diretamente sobre ele, ancorado no mesmo ponto exato. O que permanece visível ao redor das bordas se lê como um contorno.
Por que a visualização ao vivo é um Shadow DOM em vez de uma caixa de visualização comum?
A cauda existe apenas como um pseudo-elemento ::after/::before — não há como expressar isso através de um atributo style embutido, que é como a maioria das visualizações de ferramentas são renderizadas com segurança. Esta visualização monta o <style> e HTML realmente gerados em um Shadow DOM isolado, então o que você vê é exatamente o que você está prestes a colar, cauda e tudo.
E se eu precisar de uma forma diferente, não um balão com cauda?
Para formas de polígono (setas, estrelas, hexágonos) ou um balão feito com clip-path em vez de uma cauda, use o Gerador CSS Clip-Path. Para arredondar uma caixa sem cauda, o Gerador de Raio de Borda CSS oferece controle mais fino por canto, e para uma sombra suspensa simples em qualquer elemento, consulte o Gerador de Sombra de Caixa CSS.