Información sobre herramientas que se posicionan solas: posicionamiento de anclaje CSS con ventana emergente

Una información sobre herramientas es un pequeño panel que debe seguir un elemento específico y permanecer visible. Girarlo manualmente significa desplazarse por los oyentes, fijar la ventana gráfica en matemáticas y una guerra de índice z. El posicionamiento del ancla hace que la relación sea declarativa: nombre el ancla, vincule al seguidor, elija una región. Popover maneja el descarte al hacer clic externo y el apilamiento de la capa superior de forma gratuita.

<button class="pin" popovertarget="tip">?</button>
<div id="tip" class="tip" popover>Available after 5 PM</div>

.pin { anchor-name: --help-pin; }
.tip {
  position: fixed;
  position-anchor: --help-pin;
  position-area: top;
  margin-bottom: 0.4rem;
}

Como se componen las piezas

• nombre-ancla marca el elemento ancla; El ancla de posición une al seguidor a ella.
• El área de posición selecciona dónde vive el seguidor en relación con el ancla: superior, inferior y combinaciones con centro o tramo.
• El navegador cambia automáticamente al lado opuesto cuando la región elegida empuja al seguidor fuera de la pantalla.
• El atributo popover proporciona el comportamiento de apertura y cierre, el cierre de la luz y la ubicación de la capa superior, por lo que no se escribe ningún índice z en ninguna parte.

Puerta, no lo adivines.

@supports (anchor-name: --test) {
  /* anchored layout lives here */
}

El anchor positioning llegó a los motores actuales a lo largo de 2026, con Safari 27 trayendo anchors conscientes del transform y keywords de visibilidad que luego se refinaron en 27.0 y 27.2. Envuelva la función en un gate de @supports de todos modos: fuera del gate, la página simplemente no tiene tooltip, lo cual es una caída digna comparada con un tooltip mal anclado. Pruebe el teclado y el lector de pantalla una vez, porque el atributo popover hace más trabajo del que parece, y casi todo lo hace bien.

Lo mejor es la eliminación: sin oyentes de desplazamiento, sin abrazaderas matemáticas, sin arcos modales de JavaScript. Una relación, indicada en CSS, verificada por el navegador.