Qué pasa
ch-tooltip posiciona el globo con CSS puro y una clase por placement, sin detección de colisiones. Si el disparador queda contra el borde de la ventana y el placement apunta hacia ese borde, el globo se sale de la pantalla.
Medido en Chrome sobre la galería local, con un disparador fijado a 4px del borde derecho y placement="right":
- el globo termina 294px fuera del viewport,
- y la página gana scroll horizontal, que es el síntoma más molesto de los dos.
Por qué quedó así
Es una consecuencia conocida del enfoque, no un descuido. El backlog pedía explícitamente posicionar con CSS y sin librerías de posicionamiento para no agregar dependencias al bundle, y con placement fijo eso significa que quien consume elige el lado y es responsable de que ahí quepa. Todos los tooltips hechos solo con CSS se comportan igual.
Se descubrió al implementar #19 y se dejó fuera de ese PR a propósito, siguiendo lo que planteó @hectorpalmatellez ahí: que lo accesorio no detenga el avance de los componentes y quede como incremento.
Opciones para resolverlo
- Voltear al lado opuesto cuando no cabe. Medir el globo contra el viewport al abrirlo y cambiar la clase de posición si se sale. Son pocas líneas de JavaScript y no agrega dependencias, pero deja de ser «solo CSS».
- CSS anchor positioning.
position-try-fallbacks resuelve exactamente esto de forma declarativa. Antes de proponerlo hay que medir el soporte real en los navegadores que nos importan — todavía no lo hicimos.
- Dejarlo documentado y ya. Es lo que hay hoy: quien consume elige un
placement que quepa. Válido para la mayoría de los casos, porque un tooltip normalmente está en el medio de la interfaz.
Vale la pena decidir entre 1 y 2 antes de escribir código: la 2 sería más limpia si el soporte alcanza.
Cómo reproducirlo
<ch-tooltip placement="right" style="position: fixed; right: 4px; top: 50%">
<button slot="trigger" type="button">Borde</button>
<span slot="content">Un texto de ayuda razonablemente largo para la prueba</span>
</ch-tooltip>
Levantar la galería con pnpm run docs:serve, pasar el mouse por encima y mirar el borde derecho.
Qué pasa
ch-tooltipposiciona el globo con CSS puro y una clase porplacement, sin detección de colisiones. Si el disparador queda contra el borde de la ventana y elplacementapunta hacia ese borde, el globo se sale de la pantalla.Medido en Chrome sobre la galería local, con un disparador fijado a 4px del borde derecho y
placement="right":Por qué quedó así
Es una consecuencia conocida del enfoque, no un descuido. El backlog pedía explícitamente posicionar con CSS y sin librerías de posicionamiento para no agregar dependencias al bundle, y con
placementfijo eso significa que quien consume elige el lado y es responsable de que ahí quepa. Todos los tooltips hechos solo con CSS se comportan igual.Se descubrió al implementar #19 y se dejó fuera de ese PR a propósito, siguiendo lo que planteó @hectorpalmatellez ahí: que lo accesorio no detenga el avance de los componentes y quede como incremento.
Opciones para resolverlo
position-try-fallbacksresuelve exactamente esto de forma declarativa. Antes de proponerlo hay que medir el soporte real en los navegadores que nos importan — todavía no lo hicimos.placementque quepa. Válido para la mayoría de los casos, porque un tooltip normalmente está en el medio de la interfaz.Vale la pena decidir entre 1 y 2 antes de escribir código: la 2 sería más limpia si el soporte alcanza.
Cómo reproducirlo
Levantar la galería con
pnpm run docs:serve, pasar el mouse por encima y mirar el borde derecho.