componente · @solu30/ui-kit/feedback
InfoTooltip
Ícono de ayuda que muestra una aclaración al pasar por encima; a diferencia de Tooltip, no envuelve nada.
Seguir leyendo — 1 párrafo más
El globo se ancla al viewport, no sólo al ícono: si el lado pedido no entra, gira al opuesto (flip) y se corre para no pisar el borde (shift). Sin eso, un ícono cerca del borde derecho en un teléfono dejaba media aclaración fuera de la pantalla —el centrado era translateX(-50%) sobre un ancho fijo de 288px, sin mirar nunca cuánto lugar había— y en una tabla ancha con scroll horizontal el texto quedaba directamente irrecuperable. Reportado por Martín el 23/08/26 sobre las tablas de Finanzas de GestorSalon.
30 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- cmp-packages
- easycharter
- gestorsalon
El componente, montado
Cargando el espécimen…
Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.
Cómo se usa
import { InfoTooltip } from '@solu30/ui-kit/feedback'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| content | sí | React__default.ReactNode | — |
| position | opcional | "top" | "bottom" | "left" | "right" | — |
| className | opcional | string | — |
Con ícono propio
Cuando no hay ningún elemento interactivo del que colgar una aclaración — un texto suelto que necesita su propio disparador. A diferencia de «Tooltip», que envuelve un hijo y se abre con hover, ésta trae su ícono y se fija con click: dos vocabularios para la misma necesidad, ver KIT-032.
Cargando el espécimen…
export function TooltipInfo() {
return (
<div className="flex items-center gap-2 text-xs text-content/70">
<span>Margen por combo (heladería)</span>
<InfoTooltip content="Calculado sobre el precio de lista, sin promociones activas." />
</div>
)
}De specimens/feedback.tsx · TooltipInfo: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
Ejemplo del paquete
// El signo de pregunta que ya trae su disparador: no envuelve nada.
<InfoTooltip content="Se cobra al confirmar la reserva." position="right" />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.