componente · @solu30/ui-kit/feedback

Tooltip

Burbuja de ayuda que aparece al apuntar o enfocar el elemento que envuelve.

22 sitios de import en 6 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
cmp-packages
dietaly
easycharter
gestorsalon
luigi

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 { Tooltip } from '@solu30/ui-kit/feedback'

<Tooltip content="Ocupación del salón: 87%" position="top">
  <Button variant="ghost" size="sm">
    Ocupación
  </Button>
</Tooltip>

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
content	sí	`React__default.ReactNode`	Content to display in the tooltip
position	opcional	`TooltipPosition`	Position relative to the trigger element
delay	opcional	`number`	Retardo en ms. Sin valor, hereda el `delayDuration` del TooltipProvider; sin Provider, 300 ms.
tooltipClassName	opcional	`string`	Additional CSS class for the tooltip bubble
className	opcional	`string`	Additional CSS class for the wrapper
children	sí	`React__default.ReactElement`	Trigger element

Posiciones

Para aclarar un dato al pasar el mouse sobre un elemento que ya tiene su propio contenido — el tooltip envuelve ESE hijo y elige el lado según el espacio disponible.

Cargando el espécimen…

export function TooltipPosiciones() {
  return (
    <Row>
      {TOOLTIP_POSITIONS.map((t) => (
        <Tooltip key={t.position} content="Ocupación del salón: 87%" position={t.position}>
          <TriggerButton>{t.label}</TriggerButton>
        </Tooltip>
      ))}
    </Row>
  )
}

De specimens/feedback.tsx · TooltipPosiciones: 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

// `children` tiene que ser UN elemento que acepte ref: un fragmento o un string no sirven.
<Tooltip content="Se envía al confirmar" position="top">
  <IconButton icon={Info} tooltip="Ayuda" />
</Tooltip>

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.