Tooltip

Un popup que muestra información contextual asociada a un elemento cuando este recibe foco mediante el teclado o cuando el usuario pasa el cursor por encima.

tooltip-demo.tsx

1import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
2import { Button } from './button/button-source';
3
4export function TooltipDemo() {
5  return (
6    <div className="flex items-center justify-center gap-4 p-10">
7      <Tooltip delayDuration={0}>
8        <TooltipTrigger asChild>
9          <Button variant="outline">Hover me</Button>
10        </TooltipTrigger>
11        <TooltipContent side="top">
12          <p>Add to library</p>
13        </TooltipContent>
14      </Tooltip>
15    </div>
16  );
17}

AnteriorTabs