Gratis · Diseño y CSS
Laboratorio de CSS anchor positioning.
Coloca tooltips, menús y popovers junto a un botón solo con CSS mediante anchor positioning: lado, separación y alternativa, con vista previa en vivo.
Loading the calculator…
Cómo usar esta herramienta: Laboratorio de CSS anchor positioning
Introduce los datos o selecciona el archivo. Ajusta las opciones, genera el resultado y revísalo antes de copiarlo o descargarlo.
Límites y formatos compatibles
Los datos se procesan en tu dispositivo.
Notas técnicas en 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.