Tooltip Información Emergente
Introduction
El componente Tooltip es un elemento superpuesto de contexto que muestra texto descriptivo complementario y no interactivo cuando el puntero pasa por encima o enfoca el elemento disparador.
Construido específicamente pensando en nuestra arquitectura de renderizado estático Zero-JS y en el modelo de hidratación condicional, el Tooltip utiliza enlaces eficientes y amigables con el page builder, permitiendo a los autores adjuntar sugerencias contextuales a cualquier elemento de UI sin fricción.
Usage
Estos ejemplos ilustran cómo los autores de contenido configuran y enlazan bloques tooltip.
1. Tooltip base asociado a un botón
Una pista de hover clásica que explica la acción del botón, usando la colocación interactiva predeterminada (centro superior).
{
"type": "tooltip",
"triggerText": "Submit Report",
"content": "Sends your compiled analytics to the billing department."
}
2. Colocación multidireccional y tooltip deshabilitado
El mismo componente se reposiciona en varias direcciones (abajo, derecha, izquierda) mediante la propiedad placement para adaptarse a paneles estrechos. El tercero muestra la variante disabled, que no muestra la pista cuando la interacción está desactivada.
{
"type": "tooltip",
"triggerText": "Bottom Hint",
"content": "Appears below the trigger.",
"placement": "bottom",
"interactive": true
}
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Texto del disparador (triggerText) | string | "Hover me" | Etiqueta visual impresa dentro del disparador del tooltip. |
Contenido del tooltip (content) | string | - | Texto descriptivo complementario mostrado al pasar el cursor. |
Colocación (placement) | select | "top" | Dirección de anclaje físico relativa al disparador. • Opciones: "top", "bottom", "left", "right", más variantes -start/-end. |
Deshabilitado (disabled) | boolean | false | Desactiva por completo la función de tooltip. |
Forzar interactivo (interactive) | boolean | true | Hidrata la isla del tooltip para enlazar eventos de hover/enfoque. |
Retardo (ms) (delayMs) | number | 300 | Milisegundos que el tooltip espera antes de activarse. |
Architecture Notes
- Alineación inteligente de límites del viewport: La isla interactiva de Preact rastrea el espacio de pantalla dinámicamente. Si el tooltip se abre cerca de un borde, invierte la dirección automáticamente (p. ej. de abajo a arriba) y se desplaza en su eje.
- Delegación unificada de eventos: La detección de hover, la visualización por foco y el cierre con Escape se delegan centralmente desde el contenedor, minimizando enlaces en cliente.
- Overlays semánticos: Los tooltips compilan en layouts nativos y accesibles con
role="tooltip",aria-describedbye IDs de disparador únicos de fábrica.