Cuándo usar
Usa CrmInfoPopover para explicar campos desde el icono de información. PlatformTooltip presenta etiquetas breves al enfocar o pasar el cursor.
Propiedades y variantes
| Propiedad | Contrato |
|---|---|
content | Texto o contenido de la ayuda. |
ariaLabel | Nombre del trigger de CrmInfoPopover. |
placement | Posición de la ayuda. |
children / icon | PlatformTooltip envuelve un elemento y admite icono en el contenido. |
Estados y accesibilidad
El trigger debe ser alcanzable con teclado. La explicación no sustituye la etiqueta ni contiene información imprescindible que solo aparezca al hover.
Evitar
No crees popovers locales. CrmInfoPopover aún conserva una superficie clara en el tema oscuro.
Guías y sugerencias flotantes
GuidedHint desvanece juntos el mensaje y el resaltado. Para cambiar de
indicación, usa AnimatePresence mode="wait" y una clave por paso y objetivo:
el anterior desaparece antes de mostrar el siguiente. Durante la salida, la guía
queda inerte y conserva su última posición y el contenedor del portal, incluso
si se retira el objetivo. Una única opacidad controla mensaje y resaltado; la
entrada espera a medir el tamaño real del flotante. Con movimiento reducido, el cambio
es inmediato.
El resaltado se limita al área visible del objetivo dentro de contenedores con scroll. Cuando el objetivo sale de esa área, la indicación se oculta; al volver a entrar, se coloca sobre su posición visible. La demo permite desplazar el objetivo para comprobarlo.
Las recomendaciones opcionales usan la etiqueta «Sugerencia», sin numeración ni confirmación obligatoria. Cerrarlas no pausa el tutorial ni completa un paso. La demo de ayuda permite probar una transición entre dos indicaciones.
Con placement="bottom", la guía flota debajo del objetivo sin ocupar espacio
en el contenido ni agrandar el modal. Conserva el resaltado sobre el objetivo
y permite desplazar el mensaje cuando la altura disponible es limitada.
text admite contenido React para resaltar términos con chips compartidos.
Si title está vacío y no hay eyebrow, se omite la fila de encabezado. El cierre
queda en la esquina superior derecha con espacio reservado junto al contenido,
sin dejar una franja vacía arriba. El segundo paso de la demo muestra esta variante.
interactive={false} convierte la guía en una indicación sólo visual: su portal
queda inerte, sin clic, foco ni selección, incluso fuera de un contenedor inerte.
La demo automática de /platform/crm/dynamic muestra esta variante.