Saltar al contenido
Logic2BUI

Buscar en la documentación

Busca componentes y documentación

Nuevo
Menú

Descripción emergente

Ventana emergente con información relacionada con un elemento al recibir el foco o pasar el puntero por encima.

Instalación

npx logic2b@next add tooltip

Uso

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 asChild para asociarla a un elemento interactivo real, como un Button, que pueda recibir el foco.
  • Las descripciones emergentes complementan, pero no sustituyen, el nombre accesible: añade un aria-label propio 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.

JSX generado
<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.

Ver JSON

Tooltip

Componente
Props: React.ComponentProps<typeof TooltipPrimitive.Root>

TooltipTrigger

Componente
Props: React.ComponentProps<typeof TooltipPrimitive.Trigger>

TooltipContent

Componente
Props: React.ComponentProps<typeof TooltipPrimitive.Content>
PropiedadTipoObligatoriaValor predeterminadoDescripción
sideOffsetnumberNo0—

TooltipProvider

Componente
Props: React.ComponentProps<typeof TooltipPrimitive.Provider>
PropiedadTipoObligatoriaValor predeterminadoDescripción
delayDurationnumberNo0The 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.

Ver JSON
Soporte
Gestionado por la primitiva
Patrón
tooltip
Radix Tooltip
Interacciones de teclado para tooltip
TeclasComportamiento
TabOpening trigger focus reveals the tooltip.
EscapeClose 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.