Tooltip
Superposición emergente que muestra detalles suplementarios al hacer hover sobre un elemento.
La primitiva Tooltip proporciona superposiciones de etiquetas auxiliares accesibles y conscientes del teclado que aparecen al hacer hover del mouse o al enfocar un elemento.
Inicio Rápido
Envuelve un elemento interactivo para adjuntar una burbuja auxiliar de descripción de hover/foco:
import { Tooltip, Button } from 'boltdocs/primitives'
export default function App() {
return (
<Tooltip content="Eliminar permanentemente los archivos de metadatos del proyecto" delay={300}>
<Button className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
Eliminar Repositorio
</Button>
</Tooltip>
)
}
Subcomponentes Componibles
Si necesitas control total sobre el ciclo de vida del flujo de disparador, puedes componer tooltips usando los componentes anidados:
| Componente | Etiqueta HTML | Descripción | Props |
|---|---|---|---|
Tooltip.Root / Tooltip | Envoltorio | Envoltorio de auto-disparador que maneja demoras de hover y estados. | Tooltip Props |
Tooltip.Content | <div> | Contenedor flotante que renderiza la caja de descripción del tooltip y la flecha de superposición. | TooltipContent Props |
Props del Componente
Props de Tooltip
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
content | ReactNode | Requerido | El contenido de texto o gráficos a renderizar dentro del tooltip emergente. |
children | ReactElement | Requerido | El elemento objetivo interactivo del disparador (debe soportar hooks de eventos de hover/foco). |
delay | number | 500 | Duración de la demora del hover en milisegundos antes de que el tooltip aparezca con transición. |
closeDelay | number | 0 | Duración de la demora en milisegundos antes de que el tooltip desaparezca al salir el mouse. |
placement | 'bottom' | 'top' | 'left' | 'right' | 'top' | Lado de posicionamiento de alineación preferido. |
Props de Tooltip.Content
Hereda las propiedades estándar de TooltipProps de React Aria:
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
className | string | undefined | Sobrescrituras de clases CSS utilitarias personalizadas. |
style | CSSProperties | undefined | Sobrescrituras de estilo en línea. |
Personalización y estados
Tooltip envuelve el Tooltip de React Aria. El disparador (Tooltip.Root / Tooltip) solo posee el comportamiento — demoras de hover, colocación y apertura/cierre. Todos los visuales pertenecen al tema mediante el className de Tooltip.Content (una cadena simple o una función de renderizado que recibe la colocación), y RAC refleja los estados de animación y colocación en el contenido como atributos data-*.
| Estado / Slot | Mecanismo |
|---|---|
className de Tooltip.Content | Passthrough de cadena (o función que recibe { placement, isEntering, isExiting }) |
data-entering / data-exiting | Presentes durante la apertura/cierre — usa variantes de animación data-entering: / data-exiting: |
data-placement | top / bottom / left / right — offsets sensibles a la colocación mediante data-[placement=top]: |
Props de Tooltip | delay, closeDelay, placement — solo comportamiento |
OverlayArrow | Flecha temática renderizada dentro de Tooltip.Content |
Tailwind v4:
<Tooltip.Root>
<Button className="px-4 py-2 rounded-lg bg-primary-500 text-white">
Pásame el mouse
</Button>
<Tooltip.Content className="data-entering:animate-in data-entering:fade-in data-entering:zoom-in-95
data-[placement=top]:slide-in-from-bottom-1
rounded-md bg-surface text-body ring-1 ring-subtle px-2.5 py-1.5">
Detalle útil
</Tooltip.Content>
</Tooltip.Root>
