Curso gratuito de CSS
Layout moderno

Anchor Positioning para tooltips y popovers sin coordenadas manuales

La idea es simple: un elemento declara un nombre de ancla y otro puede colocarse respecto a sus bordes con anchor(). Cuando no hay soporte, seguimos necesitando cálculos o wrappers auxiliares.

.button {
  anchor-name: --trigger;
}

.tooltip {
  position-anchor: --trigger;
  top: anchor(bottom);
  justify-self: anchor-center;
}

Demo 1 · tooltip nativo o fallback local

Tooltip vinculado al borde inferior del botón.

Demo 2 · popover contextual