Grátis · Design e CSS
Laboratório de CSS anchor positioning.
Posicione tooltips, menus e popovers ao lado de um botão só com CSS usando anchor positioning: lado, espaçamento e alternativa, com pré-visualização ao vivo.
Loading the calculator…
Como usar esta ferramenta: Laboratório de CSS anchor positioning
Insira os dados ou escolha o arquivo. Ajuste as opções, gere o resultado e confira antes de copiar ou baixar.
Limites e formatos aceitos
Seus dados são processados no seu dispositivo.
Notas técnicas em inglês
Needs a browser with anchor positioning (all major browsers since 2026). Everything is calculated in your browser; nothing you type is uploaded.
anchor-name marks the button, position-anchor ties the tooltip to it, position-area chooses the side and position-try-fallbacks switches sides when the tooltip would overflow.
position-area: top with a flip-block fallback keeps a tooltip above its button and moves it below when there is no room.