Instalación
npx logic2b@next add tooltipUso
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
<Tooltip>
<TooltipTrigger>Pasa el cursor</TooltipTrigger>
<TooltipContent>Añadir a la biblioteca</TooltipContent>
</Tooltip>
Notas de uso
Tooltip incluye su propio TooltipProvider, por lo que funciona de forma independiente. Envuelve la aplicación en un único TooltipProvider para compartir los retardos entre varias descripciones emergentes.
TooltipContent también acepta propiedades de posición de Radix como side (top \| right \| bottom \| left) y align.
Ejemplos
Posiciones
En un botón de icono
Accesibilidad
- Se abre al pasar el puntero y al recibir el foco de teclado en el disparador; se cierra con Escape.
- Usa
TooltipTrigger asChildpara asociarla a un elemento interactivo real, como unButton, que pueda recibir el foco. - Las descripciones emergentes complementan, pero no sustituyen, el nombre accesible: añade un
aria-labelpropio a los disparadores que solo contienen un icono.
Playground interactivo
Edita las propiedades del componente y revisa el JSX exacto antes de copiarlo. La vista previa se carga solo cuando esta sección entra en pantalla.
<Tooltip>
<TooltipTrigger
className="rounded-md border px-4 py-2 text-sm font-medium"
>Registry status</TooltipTrigger>
<TooltipContent>All quality gates pass</TooltipContent>
</Tooltip>Referencia de API
Generada a partir de las exportaciones públicas de TypeScript en src/ui/tooltip.tsx. Las descripciones técnicas conservan el texto canónico del código fuente.
Tooltip
ComponenteProps: React.ComponentProps<typeof TooltipPrimitive.Root>TooltipTrigger
ComponenteProps: React.ComponentProps<typeof TooltipPrimitive.Trigger>TooltipContent
ComponenteProps: React.ComponentProps<typeof TooltipPrimitive.Content>| Propiedad | Tipo | Obligatoria | Valor predeterminado | Descripción |
|---|---|---|---|---|
sideOffset | number | No | 0 | — |
TooltipProvider
ComponenteProps: React.ComponentProps<typeof TooltipPrimitive.Provider>| Propiedad | Tipo | Obligatoria | Valor predeterminado | Descripción |
|---|---|---|---|---|
delayDuration | number | No | 0 | The duration from when the pointer enters the trigger until the tooltip gets opened. |
Contrato de accesibilidad
Comportamiento legible por máquinas y responsabilidades de quien integra tooltip. Los detalles normativos conservan el texto canónico del registro.
- Soporte
- Gestionado por la primitiva
- Patrón
- tooltip
- Radix Tooltip
| Teclas | Comportamiento |
|---|---|
| Tab | Opening trigger focus reveals the tooltip. |
| Escape | Close the open surface and restore focus. |
Semántica incorporada
- Tooltip content is associated with its trigger and opens for keyboard focus as well as hover.
Responsabilidades de integración
- Tooltips supplement rather than replace the trigger's accessible name.