Skip to content

Tooltip

Información contextual al pasar el cursor o enfocar. Monocromo; posiciones, alineación, delay y fondo configurables.

Preview principal

TOOLTIPhover · focus

Pasa el cursor o enfoca con teclado. Sin children muestra el icono help.

No delay

delay={0} — aparece al instante (default). Contraste con delay={400}.

Box align

align: start · center (default) · end — sobre un botón ancho.

Custom content

label acepta ReactNode — no solo texto.

Components

Envuelve Button, Badge, Avatar u otros del sistema.

En líneaMD

Posiciones

top · bottom · left · right.

Tamaños

sm · md (default) · lg.

Fondo

dark (default) · light.

Uso

Section titled “Uso”
import { Tooltip, Button } from "devsoftec-ui";


<Tooltip position="top" label="Información">
  <Button variant="secondary">Hover me</Button>
</Tooltip>

children es el disparador; label es el contenido de la burbuja (texto o ReactNode). Sin children, muestra el icono help.

Props

Section titled “Props”
Prop Tipo Default Descripción
position top | bottom | left | right top Posición
align start | center | end center Alineación sobre el trigger
delay number 0 ms antes de mostrar (0 = no delay)
size sm | md | lg md Padding / fuente
bg dark | light dark Fondo
label ReactNode — Contenido de la burbuja
children ReactNode icono help Disparador

Variantes de demo

Section titled “Variantes de demo”
Demo Qué muestra
No delay delay={0} vs delay={400}
Box align align start / center / end
Custom content label con ReactNode
Components Trigger = Button, Badge, Avatar, etc.

Comportamiento

Section titled “Comportamiento”
  • Aparece en hover o focus; se oculta al salir.
  • role="tooltip" y aria-describedby en el disparador.
  • Fundido ~160ms.