Volver a las notas

CSS anchor positioning: tooltips que se recolocan

3 de noviembre de 2026·
cssanchorpositioninguiwebdev
Demo en vivoAbrir a pantalla completa

Un tooltip pegado a su botón que se pasa al otro lado cuando choca con un borde era, hasta hace poco, cosa de una librería de posicionamiento. Ahora son unas pocas líneas de CSS, y lo esencial es Baseline desde enero de 2026.

Arrastra la bola de la demo de arriba hacia el borde superior. La tarjeta que tenía encima salta abajo. Llévala a un lateral con left seleccionado y se pasa a la derecha. Las dos guías discontinuas y la etiqueta --orb también la siguen. Lo único que hace el JavaScript es mover la bola. Dónde va todo lo demás lo decide el CSS.

Qué es

CSS anchor positioning permite colocar un elemento con posición absoluta o fija respecto a otro elemento, el ancla, en lugar de respecto a su bloque contenedor. Es el problema que hay detrás de cada tooltip, desplegable, menú en popover o etiqueta de "nuevo". Hasta ahora tocaba medir con getBoundingClientRect(), escuchar el scroll y el resize y resolver a mano los casos límite, o cargar una librería que lo hiciera por ti.

Funciona en dos pasos. Le das un nombre al ancla y después enganchas el elemento posicionado a ese nombre:

/* el ancla */
.orb {
  anchor-name: --orb;
}

/* el elemento anclado */
.card {
  position: absolute;
  position-anchor: --orb;
  position-area: top;
  margin: 14px;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

Es exactamente la regla que usa la tarjeta de la demo (sin la parte visual).

Cómo encajan las piezas

anchor-name declara que un elemento es un ancla. El nombre es un dashed ident, como una custom property: --orb, --boton-menu.

position-anchor va en el elemento posicionado y dice a qué ancla pertenece. Ese elemento tiene que ser position: absolute o position: fixed.

position-area es la forma fácil de colocarlo. Imagina una cuadrícula de 3×3 con el ancla en la celda central. top pone el elemento encima del ancla, right a su derecha y top right en la celda de la esquina. El selector de la demo cambia entre estos valores en vivo.

anchor() es la forma precisa. Se usa dentro de las propiedades inset (top, left, right, bottom) y devuelve la posición de uno de los lados del ancla. La guía vertical de la demo es solo esto:

.guide.v {
  position: absolute;
  position-anchor: --orb;
  top: 0;
  bottom: 0;
  left: anchor(center); /* siempre pasa por el centro de la bola */
  width: 1px;
}

position-try-fallbacks es lo que hace que se dé la vuelta. Si el elemento fuera a desbordar su bloque contenedor, el navegador prueba las opciones que indiques, en orden, hasta que una quepa. flip-block lo refleja en el eje de bloque (de arriba pasa a abajo). flip-inline lo refleja en el eje en línea (de izquierda a derecha). Y flip-block flip-inline, escrito como una sola opción, hace las dos cosas a la vez. Esa opción combinada importa: la guía de MDN muestra que con solo flip-block, flip-inline, un tooltip metido en una esquina no tiene ninguna opción que quepa, y el navegador vuelve a la posición original, que desborda. Pruébalo en la demo: elige top right, lleva la bola a la esquina superior derecha y la tarjeta acaba abajo a la izquierda.

Después apaga Fallbacks y vuelve a empujarla contra un borde. Con position-try-fallbacks: none la tarjeta se queda donde la pediste, aunque eso signifique salirse del tablero o tapar el ancla. La etiqueta "Resultado" de la demo te dice en qué lado ha acabado de verdad la tarjeta. Lo saca leyendo la posición final, no calculándola.

Soporte y trampas

Según los datos de web-features, anchor positioning pasó a ser Baseline (newly available) el 13 de enero de 2026, con Firefox 147. Chrome y Edge lo tienen desde la 125 y Safari desde la 26. Algunas piezas llegaron más tarde a Chromium: position-try-fallbacks en la 128 y position-area en la 129. La función completa aún no figura como Baseline, porque algunas novedades más recientes, como el valor anchor-visible de position-visibility, todavía no están en todos los navegadores.

Cosas que me han hecho tropezar, o que querría saber antes de usarlo en producción:

  • Pon siempre position-anchor de forma explícita. Los navegadores no se han puesto de acuerdo en su valor inicial. Según los datos de compatibilidad de MDN, Chrome pasó por implicit, auto y none antes de quedarse con normal en la 151, y Firefox 147–150 y Safari 26 usan auto. Si nombras tú el ancla, nada de eso te afecta.
  • El orden del DOM importa. La especificación solo acepta un ancla que se maquete antes que el elemento posicionado. Si los dos tienen posición absoluta dentro del mismo bloque contenedor, el ancla tiene que ir antes en el DOM. En la demo, la bola va antes que la tarjeta en el HTML.
  • Un ancla oculta no cuenta. Si el ancla tiene display: none, MDN explica que el elemento posicionado se coloca respecto a su ancestro posicionado más cercano.
  • Con nombres repetidos gana el último. Si varios elementos comparten anchor-name, el elemento posicionado se engancha al último en el orden del código. En componentes repetidos (una lista de tarjetas, cada una con su tooltip) usa anchor-scope para limitar cada nombre a su propio subárbol.
  • Los popovers traen ancla de serie. Un popover abierto con popovertarget o commandfor recibe una referencia de ancla implícita a su botón. Si después lo colocas con anchor(), MDN explica que además hay que resetear el posicionamiento por defecto del popover y usar position-anchor: auto.

Para navegadores antiguos, la demo comprueba el soporte con CSS.supports('anchor-name: --a') (más position-area y position-try-fallbacks). Si falta alguno, muestra un aviso y coloca la tarjeta con un pequeño script con getBoundingClientRect() que imita los mismos giros. En CSS puedes hacer la misma comprobación con @supports (anchor-name: --a) y dejar una posición estática sencilla por defecto.

Qué vigilar

  • position-visibility: ocultar automáticamente el elemento anclado cuando su ancla sale de la vista (anchor-visible) todavía no funciona en todos los navegadores.
  • Fallbacks propios con @position-try: cuando dar la vuelta no basta, puedes definir posiciones con nombre, con su propio tamaño y márgenes. Forman parte del mismo núcleo Baseline y merece la pena probarlas en menús que tienen que encogerse.
  • Quitar librerías: si un proyecto solo usa una librería de posicionamiento para tooltips y menús, es buen momento para revisar cuánto de ese código sigue haciendo falta.

Fuentes