Planteamiento y contexto
Usted mantiene un componente de tooltip altamente reutilizado. El posicionamiento de anclaje CSS lo vincula a un disparador (trigger) y las alternativas de position-try evitan el desbordamiento (overflow), pero cuando el popover se mueve a otro lado, su flecha, área de desplazamiento y padding siguen siendo incorrectos.
Diseñe una solución CSS-first que permita que la ubicación alternativa dicte los estilos, aísle las instancias repetidas y se degrade de forma segura cuando el posicionamiento de anclaje no esté disponible.
Qué evalúa el entrevistador
- Si comprende las relaciones de posicionamiento de anclaje y la selección de alternativas.
- Si las container queries ancladas pueden leer la ubicación real en lugar de copiar el estado de JavaScript.
- Si se abordan la accesibilidad, los límites de desplazamiento, el apilamiento y el aislamiento de componentes repetidos.
- Si se incluyen la detección de características, el diseño estático y la mejora progresiva.
Preguntas para aclarar
- ¿El tooltip es texto plano, un menú o un diálogo interactivo?
- ¿Las alternativas cambian de lado o entran en un contenedor con desplazamiento?
- ¿Los navegadores objetivo admiten posicionamiento de anclaje y container queries?
- ¿Puede JavaScript leer dimensiones, o la solución debe ser exclusivamente en CSS?
Respuesta de 30 segundos
Haría que el disparador fuera un ancla y el tooltip un contenedor con posicionamiento anclado con alternativas de position-try ordenadas. Cada alternativa utiliza una container query anclada para cambiar la flecha, el padding y la altura máxima; los estilos internos dependen únicamente del contenedor del componente. Utilice @supports para la detección de características, con posicionamiento estático o de JavaScript existente como alternativa mientras se preserva la relación de descripción accesible. Pruebe los bordes del viewport, el zoom, los contenedores con desplazamiento y el texto extenso para comprobar que no haya desbordamiento ni recorte de foco.
Análisis detallado paso a paso
Establecer el ancla y las posiciones candidatas
Declare anchor-name en el disparador y conecte el tooltip con position-anchor e inset/anchor(). Describa el orden de los candidatos con alternativas de position-try en lugar de codificar rígidamente la dirección en la lógica del componente.
Convertir el popover en un contenedor de consulta
Establezca container-type para que una container query anclada dentro del popover se adapte a la alternativa seleccionada. Consulte la condición del contenedor asociada con el resultado anclado en lugar de adivinar a partir del ancho del viewport.
Sincronizar la flecha y el desplazamiento
Utilice diferentes bordes para la flecha, transform-origin, max-block-size y overflow para cada ubicación. El contenido extenso se desplaza dentro del popover; el tooltip no debe expandirse fuera del viewport ni recortar el foco del teclado.
Aislar instancias repetidas
Otorgue a cada instancia su propio nombre de ancla o ámbito de nomenclatura para que un elemento de lista no coincida con el ancla de otra instancia. Mantenga las reglas de apilamiento, position-area y scrim a nivel local.
Detectar características y degradar
Detecte la compatibilidad con @supports (anchor-name: --x) y la capacidad requerida de container query. Una alternativa puede utilizar contenido estático adyacente o un posicionador JavaScript existente, pero manteniendo aria-describedby, el cierre por teclado y el orden de foco.
Verificar límites y accesibilidad
Pruebe viewports estrechos, zoom, RTL, contenedores con desplazamiento, interacción táctil y movimiento reducido. Use el teclado y lectores de pantalla para asegurarse de que el tooltip no robe el foco, no se recorte ni se vuelva ilegible cuando cambie la ubicación de la alternativa.
Respuesta modelo
Declararía el disparador como un ancla, convertiría el tooltip en un contenedor y proporcionaría alternativas de position-try ordenadas. Una container query anclada dentro del popover adapta la flecha, el padding, la altura máxima y la dirección de desplazamiento a la ubicación real; cada instancia aísla su nombre de ancla y sus reglas de apilamiento. @supports proporciona mejora progresiva, mientras que los navegadores no compatibles utilizan posicionamiento estático o de JavaScript existente con el mismo aria-describedby, cierre por teclado y orden de foco. Pruebe viewports estrechos, zoom, RTL, contenedores con desplazamiento, texto extenso y lectores de pantalla.
Errores comunes
- Adivinar la alternativa a partir del ancho del viewport en JavaScript en lugar de responder a la ubicación real.
- Compartir un único nombre de ancla en todos los tooltips y vincular instancias entre sí.
- Cambiar top/left sin sincronizar la flecha, el desplazamiento o transform-origin.
- Omitir
@supportsy dejar a los navegadores no compatibles con popovers inutilizables. - Probar únicamente viewports normales e ignorar RTL, zoom, contenedores con desplazamiento y el foco del teclado.
- Tratar un tooltip como un diálogo sin una semántica accesible explícita.
Preguntas de seguimiento
¿En qué se diferencia una container query anclada de una container query normal?
Selecciona estilos a partir de la ubicación alternativa de un elemento con posicionamiento anclado; una container query normal utiliza principalmente el tamaño del contenedor o condiciones de estilo.
¿Qué sucede cuando no se admite el posicionamiento de anclaje?
Utilice un diseño estático adyacente o el posicionador JavaScript existente con el mismo nombre accesible, mecanismo de descarte y orden de contenido; no dependa de una ruta sintáctica parcial.
¿Cómo se evita que un popover cubra el foco?
Limite su tamaño y desplazamiento internamente, luego pruebe Tab, Escape, lectores de pantalla y el contenedor padre con desplazamiento para que los elementos enfocados sigan siendo visibles.
¿Por qué no usar cuatro media queries direccionales?
Las media queries describen el viewport, no el espacio real del ancla y el contenedor; las alternativas también dependen de los contenedores con desplazamiento, las fuentes y la longitud del contenido.