Tooltip
Un componente para mostrar información adicional al pasar el ratón sobre un elemento.
Cargando...
import { Tooltip } from "stofli-ui";Cargando...
Un tooltip básico con posición arriba (por defecto).
Cargando...
Cargando...
Puedes añadir una flecha que apunte al elemento usando la prop showArrow.
Cargando...
Cargando...
El tooltip puede posicionarse en cuatro direcciones diferentes usando la prop position.
Cargando...
Cargando...
El tooltip soporta diferentes variantes de estilo usando la prop variant.
Cargando...
Cargando...
Personaliza los bordes redondeados usando la prop radius.
Cargando...
Cargando...
Puedes personalizar el retraso de aparición del tooltip.
Cargando...
Cargando...
Puedes incluir contenido HTML más complejo dentro del tooltip.
Cargando...
Cargando...
Puedes personalizar cualquier parte del componente usando las propiedades de clases personalizadas con Tailwind CSS.
Cargando...
Cargando...
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
children | React.ReactNode | - | Elemento al que se adjunta el tooltip |
content | React.ReactNode | - | Contenido a mostrar en el tooltip |
position | "top" | "right" | "bottom" | "left" | "top" | Posición del tooltip respecto al elemento |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
delay | number | 300 | Retraso antes de mostrar el tooltip (ms) |
maxWidth | string | "200px" | Ancho máximo del tooltip |
showArrow | boolean | false | Mostrar o no la flecha del tooltip |
className | string | "" | Clases adicionales para el contenedor principal |
tooltipClassName | string | "" | Clases adicionales para el tooltip |
contentClassName | string | "" | Clases adicionales para el contenido del tooltip |
arrowClassName | string | "" | Clases adicionales para la flecha del tooltip |
radius | "none" | "sm" | "md" | "full" | "md" | Radio de los bordes |
id | string | - | ID personalizado para el tooltip |