Diseña tooltips, menús y popovers nativos y ultraeficientes con CSS moderno.
Tradicionalmente, posicionar un elemento flotante (como un menú contextual, un cuadro de diálogo o un tooltip) con precisión milimétrica junto a un disparador requería cálculos complejos en JavaScript. Teníamos que recurrir a librerías externas o escuchar eventos de scroll y redimensionamiento de pantalla, lo cual penalizaba el rendimiento de la CPU del dispositivo.
Con la llegada de la API de CSS Anchor Positioning, podemos vincular de manera nativa un elemento posicionado a uno o más elementos de referencia (las "anclas"). Nosotros abogamos por esta solución porque traslada la carga de cálculo directamente al motor de renderizado del navegador, garantizando transiciones fluidas a 60 FPS sin parpadeos visuales.
Nuestra herramienta te permite configurar los parámetros clave para crear el anclaje perfecto sin escribir código desde cero:
Al migrar de soluciones basadas en JavaScript como Popper.js o Floating UI a CSS Anchor Positioning, obtendrás beneficios inmediatos:
popover y el elemento <dialog>.Es una especificación moderna de CSS que permite posicionar un elemento (como un menú desplegable o tooltip) con respecto a otro elemento de referencia (el "anchor") de forma nativa, sin necesidad de recurrir a costosos scripts de JavaScript para calcular coordenadas.
Actualmente tiene soporte nativo en navegadores basados en Chromium (como Google Chrome y Microsoft Edge) desde la versión 125. Otros motores como Firefox y Safari están trabajando en su implementación, existiendo polyfills para asegurar la compatibilidad.
Al delegar el cálculo de la posición directamente al motor de renderizado del navegador (en el hilo de composición), se eliminan los retardos de scroll y resize causados por JavaScript, reduciendo el tiempo de CPU a prácticamente cero y evitando el molesto parpadeo o lag visual.