FeedbackDisponible

Tooltip

Ayuda breve y complementaria al pasar el cursor o enfocar.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/tooltip.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { PlusIcon as Plus } from "@phosphor-icons/react";

export default function Demo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={<Button variant="outline" aria-label="Add component" />}
        >
          <Plus weight="bold" aria-hidden="true" />
        </TooltipTrigger>
        <TooltipContent>Add a component to your collection</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Comprueba cerrado, abierto, opción resaltada, seleccionado y deshabilitado cuando el componente los admita.
Los diálogos y menús deben poder abrirse con teclado. Escape cierra los overlays no persistentes y devuelve el foco al disparador. Tooltip y Hover Card también deben mostrarse al enfocar.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
TooltipProvider.delay	number	primitive default	Delay before showing a tooltip.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.